vue-mixins的理解和简单使用via作用理解单纯组件引用：父组件+子组件>>>父组件+子组件mixins：父组件+

via

作者：老鼠AI大米_Java全栈
链接：https://www.jianshu.com/p/a72bf060eeaa
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作用

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。

理解

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。
相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用： 父组件 + 子组件 >>> 父组件 + 子组件
mixins： 父组件 + 子组件 >>> new父组件

有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。
另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。

使用

方法的复用

HTML

<div id="app">
    <child></child>
    <kid></kid>
</div>

 Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})

Vue.component('kid',{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log('Kid foo()'+this.msg++)
        }
    }
})