preface

Beginners vue. Extend, extends, Minxin, minxins have not been very clear, after a lot of review, summarized the following points, if there is any mistake please correct.

1.Vue.extend

Official vue.extend explained

Vue.extend is a global API that essentially creates a constructor and mounts it to an HTML element (creating a template tag). Parameters can be passed by propsData.

    <h1>Vue.extend</h1>
    <hr>
    <div id="element"> <h1>Hello! </h1> </div> <hr> <author></author> <hr> <div id="transmit"></div>
Copy the code

Note: The contents of mounted elements are overwritten

    var Profile1 = Vue.extend({
    template: '<p>My name is {{Name}}</p>',
    data: function () {
        return {
        Name: 'ElucidatorSky'
        }
      }
    })
    // 输出 Profile1 实例，在控制台输出为VueComponent{}
    console.log(new Profile1());
    // 创建 Profile1 实例，并挂载到一个元素上。
    new Profile1().$mount('#element')

    var Profile2 = Vue.extend({
        template:"<p>{{Name}}</p>",
        data:function() {return{
                Name:'ElucidatorSky'}}}); // Create Profile2 instance and mount it to an element. new Profile2().$mount('author');

    var Profile3 = Vue.extend({
        template: '< p > {{extendData}} < / br > instance the incoming data is: {{propsExtend}} < / p >',
        data: function () {
            return {
            extendData: 'Here's the data for extend',
            }
        },
        props:['propsExtend'}) // Create a Profile instance and mount it to an element. New Profile3({propsData:{propsExtend:'I'm the data passed in by the instance'}}).$mount('#transmit')
Copy the code

After the operation

Why extend

In the Vue project, once we had the initial root instance, all pages were basically managed through the Router and components were registered locally via import, so component creation was less of a concern than extend. But there are several downsides to this:

Component templates are predefined. What if I want to dynamically render a component from an interface? Everything is rendered under #app and registered components are rendered at their current location. What if I want to implement something like window.alert() that prompts the component to call it as if it were a JS function? This is where the vue. extend + vm.$mount combination comes in handy.

2.extends

Official extends interpretation

Extends is an option, primarily to make it easier to extend single-file components. It’s just that the parameters received are simple option objects or constructors, so extends can only extend one component at a time

// extends example var CompA = {created:function(){
                console.log("I am expanded.");
                }
            }
extends: CompA
Copy the code

Console output

3. Vue. Mixin and minxins

Official vue.Mixin explains

Vue.mixin means to mix with. The function of mixins is that multiple components can share data and methods. After being introduced into the components that use mixins, the methods and attributes in mixins are incorporated into the components and can be directly used, extending the existing component data and methods. Vue.mixin() can mix your custom methods into all Vue instances (that is, any added component will mix your custom methods).

// mixins example // global mixin Vue. Mixin ({created:function(){
        console.log('I was mixed in globally.');
    }
})
var mixin = {
  created: function () { console.log('I am mixed in from the outside.'}} var app = new Vue({// local mixins: [mixin]})Copy the code

Mixins are characterized by methods and parameters that are not shared among components

The parameter num in the mixed object

export default {
    data() {
        return {
            num: 1,
        }
    },
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('hello form mixinIn')}}}Copy the code

The num parameter in component 1 performs the +1 operation

<template>
  <div class="template1">
      <p><button @click="addone"Num :{{num}} </div> </template> <script> import mixinIn from </button></p> template1'.. /assets/mixinIn'
export default {
    mixins: [mixinIn],
    methods:{
        addone(){
            this.num++
        }
    }
}
</script>
Copy the code

Perform the +2 operation for parameters in component 2

<template>
  <div class="template1">
      <p><button @click="addtwo"Num :{{num}} </div> </template> <script> import mixin from </button></p> Template2'.. /assets/mixinIn'
export default {
    mixins: [mixin],
    methods:{
        addtwo(){
            this.num+=2
        }
    }
}
</script>
Copy the code

Num in components 1 and 2 are not affected by each other

// global reference mixin import mixin1 from'./mixin1'
import Vue_extend from './Vue_extend'
var Profile1 = Vue.extend(Vue_extend)
new Profile1().$mount('#app') vue. mixin(mixin1) // Local reference mixin import mixin2'./mixin2'; // Import the mixin file import extend'./extend'; // Import mixin filesexport default {
   mixins: [mixin2],
   extend: extend
}
Copy the code

The difference between them

import Vue from 'vue'
import mixin1 from './assets/mixin1'
import mixin2 from './assets/mixin2'
import Vue_extend from './assets/Vue_extend'
import extend from './assets/extend'Var Profile1 = vue.extend (Vue_extend) vue.mixin (mixin1) // Add new Profile1().$mount('#app') // If you want to mount it, it will not be usedexport default {
  name: 'App',
  mixins:[mixin2],
  extends: extend,
  created() {
      console.log("I'm a native app.")}}Copy the code

mixin1.js

export default {
    created() {
        console.log('I'm mixin1 with global mixin')}}Copy the code

mixin2.js

export default {
    created() {
        console.log('I'm a local mixin2')}}Copy the code

extend.js

export default {
    created() {
        console.log('I'm locally extended')}}Copy the code

Vue_extends.js

export default {
    created() {
        console.log('I'm globally extended')}}Copy the code

The results of

First call mixin1 mixed on mount: “I’m globally mixed mixin1”

Then print the mounted Vue_extend: “I’m globally extended”

Then output mixin1 mixed into the native app: “I’m mixin1 mixed globally”

Print mixin1 blended into extend: “I am globally blended mixin1”

And output extend: “I’m locally extended.”

Output mixin2: “I’m mixin2”

Finally, output the native app: “I am a native app”

Thus it can be seen

  1. Extend will be mixed in with vue. mixin
  2. If components are interfused, the interfused component is executed first
  3. Extends > native App Mixin > extends > Mixins > Native App

Refer to the article

Fire Wolf 1 vue extend, mixins, extends, components, install several operations

Technical fat vue video tutorial