Now that vue.extend () is used to encapsulate components, what exactly is this thing? Let’s look at the official explanation

Vue. Extend ()

1. The parameters:

{Object} options

2. Usage:

Using the base Vue constructor, create a “subclass.” The parameter is an object that contains component options.

The data option is a special case, note – it must be a function in vue.extend ()

<div id="mount-point"></div>

Var Profile = Vue. Extend ({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: Function () {return {firstName: 'Walter', lastName: 'White', alias: 'Heisenberg'}}}) // Create Profile instance and mount it to an element. New Profile().$mount('#mount-point')Copy the code

<p>Walter White aka Heisenberg</p>

Vue.extend () in the eye below

1. Listen to the breakdown

In its current form, it is used to encapsulate generic notification components, Message prompts like ElementUI, and so on.

2. Usage

It is not used in the same way as the Message component, which is called functionally (eg:this.$message(‘test’)). There are also generic functional components such as the Alert component, which are implemented in a similar way.

3. Vue API to be used

Const Message = vue.extend (Message) // Using the base Vue constructor, Create a "subclass" const _Message = new Message({}) // instantiate the component let vm = _Message.$mount() // mount the component, vm is thisCopy the code

4. Application Scenario (Example)

Here take the package of Message prompt component as an example, source SRC file address (including the package of Message prompt component and MessageBox)

1) Effect drawing

2) Code implementation

File directory Display

! [4PY160WO1{$`@132V(VTIX (1).png

// index.js /* eslint-disable no-mixed-operators */ import Vue from 'vue'; Vue configuration item import message from './ message '; // Make the component message.vue configuration item the default configuration item of the message class (vue class, vue constructor), const message = vue. Extend (message); // Using the base Vue constructor, create a "subclass" const vmArr = []; Function $message(opts) {function $message(opts) { // eslint-disable-next-line no-underscore-dangle const _message = new Message({data() {return {MSG: Opts. Message | | 'the default prompt, type: opts. Type, isVisible: false, / / eslint - disable - next - line no - mixed - operators top: `${vmArr.length * 68 + 20}px`, }; }, methods: { show() { this.isVisible = true; vmArr.push(this); }, hide() { this.isVisible = false; vmArr.shift(); vmArr.forEach((item, index) => { // eslint-disable-next-line no-param-reassign item.top = `${index * 68 + 20}px`; }); }, }, mounted() { this.show(); setTimeout(() => { this.hide(); }, 3000); }}); // The template is compiled to the instance's $el attribute _message.$mount(); / / manual body mount to the specified node. The document body. The appendChild (_message. $el); } export default { // eslint-disable-next-line no-shadow install(Vue) { // eslint-disable-next-line no-param-reassign Vue.prototype.$message = $message; }};Copy the code

// Message.vue <template> <transition name="fade"> <div v-if="isVisible" class="message" :style="{top: top}" :class="type" > <svg v-if="type === 'success'" t="1619519648259" class="icon" viewBox="0 0 1024 1024" Version = "1.1" XMLNS = "http://www.w3.org/2000/svg" p - id = "2605" width = "14" height = "14" > < path d = "M0 a512 0 0 1 1024 512 512 0A512 512 0 10 0 512z" fill="#67c23a" p-id="2606" data-spm-anchor-id=" a313X.7781069.0.i0 "class=""></path><path D ="M439.012 766.976a53.532 53.532 0 0 1-61.44 0.683 55.41 55.41 0 0 1-14.678-14.223L181.248 548.41a36.238 36.238 0 01 51.2-51.2l172.146 152.12 397.938-372.28a35.271 35.271 0 0 1 49.891 49.835L447.943 759.24a55.182 55.182 0 0 1-8.931 7.737z" fill="# FFFFFF "p-id="2607" data-spm-anchor-id=" a313X.7781069.i1" class="selected"></path></ SVG >< SVG V-if ="type === 'info'" t="1619520503387" class="icon" viewBox="0 0 1024 1024" version="1.1" P - XMLNS = "http://www.w3.org/2000/svg" id = "7563" width = "14" height = "14" > < path d = "M511.8464 C229.888 0.4608 0.6144 0.4608 229.9392 0.6144 512.2048c0 282.2656 229.2736 511.744 511.232 511.744 282.0096 0 511.232-229.4784 511.232-511.744 0-282.2656-229.2224-511.744-511.232-511.744z M79.872 699.648c-38.2976 57.548-77.4656 102.3488-143.7696 102.3488-44.6976-7.168-63.8976-39.9872-53.504-72.7552 a13.4144 l84.6848 281.4976 13.4144 0 0 Is it for real? Is it for real? Is it for real? Is it for real 38.2976-57.5488 102.1952-103.936 144.5376-103.936 40.7552 3.9936 59.904 36.7616 52.736 72.7552 L-85.504 283.0848 C-0.768 6.4 2.4576 12.8 8.0384 15.1552 6.3488 2.4064 19.1488-5.5808 30.3616-17.5616 L51.0976-61.5936 c1.5872 9.6256-0.8192 28.0064-0.8192 34.4064zM580.608 332.288 C-32.768 0-59.0848-24.0128-59.0848-58.368 0-35.1744 26.3168-58.368 59.0848-58.368 32.768 0 29.768 58.368-59.136 58.368z" p-id="7564" Data-spm-anchor -id=" a313X.7781069.0.i14 "class="selected" fill="#909399"></path></ SVG > {{MSG}} </div> </transition> </template> <script> export default { name: 'Message', }; </script> <style> .message { box-sizing: border-box; width: 380px; text-indent: 20px; line-height: 48px; font-size: 14px; border: 1px solid; border-radius: 4px; position: fixed; z-index: 99; top: 20px; left: 50%; transform: translate(-50%); transition: all .4s; } .success { color: #67c23a; border-color: #e1f3d8; background-color: #f0f9eb; } .info { color: #909399; border-color: #ebeef5; background-color: #edf2fc; } .message > .icon { margin-right: 10px; transform: translateY(2px); } .fade-enter,.fade-leave-to { opacity: 0; transform: translate(-50%, -68px); } .fade-enter-to,.fade-leave { opacity: 1; transform: translate(-50%); } .fade-enter-active,.fade-leave-active { transition: all .4s; } </style>Copy the code

//main.js
/* eslint-disable no-new */
import Vue from 'vue';
import App from './App';
import $message from './components/message';

Vue.use($message);

new Vue({
  el: '#app',
  name: 'Root',
  template: '<App/>',
  components: { App },
});

Copy the code

// app. vue <template> <div class="container"> < button@click ="message('success')" @click="message('info')" </button> </div> </template> <script> export default {name: 'App', methods: { message(type) { this.$message({ type, message: type === 'success' ? 'Congratulations, this is a success message' : 'This is a message prompt ',}); ,}}}; </script> <style> * { margin: 0; padding: 0; user-select: none; } .container{ text-align: center; line-height: 800px; } </style>Copy the code

That’s all the code that wraps the Message prompt component into a generic component using vue.extend ()

We inform you that

Compared with everyone here, I am still only a super small white…… I hope you don’t hesitate to comment, after all, I know the code is really written in general