vue的mixin怎么使用

mixin

mixin主要是针对vue的js逻辑复用，所以它一般都是js文件。

用法

先来看看它的用法

//name.jsexportdefault{data(){return{name:'mixin的name',obj:{name:'mixin',value:'mixin'}}},methods:{getName(){console.log('我是mixin,name:',this.name)console.log('obj:',this.obj)}},mounted(){console.log('我是mixin的mounted')this.getName()}}

它的用法和vue组件的用法是一样的。 比如钩子函数，methods的方法，data的数据等等。

然后在组件使用，通过mixins选项即可引入。

importnamefrom'./name.js'exportdefault{mixins:[name],data(){}}

那么就会有一个问题，那么如果组件内也定义了同样的钩子函数，同名方法，同名数据，该以谁的为准？是覆盖还是合并？

通过例子来看看

importnamefrom'./name.js'exportdefault{mixins:[name],data(){name:'组件的name',obj:{name:'component'}},methods:{getName(){console.log('我是组件,name:',this.name)console.log('obj:',this.obj)}},mounted(){console.log('我是组件的mounted')this.getName()}}

打印的结果如下：

通过以上结果可以得到，

钩子函数会合并起来，都会执行。先执行mixins的钩子函数再执行组件的钩子函数。

data的同名数据，要分情况讨论

如果是基本类型，会用组件的同名数据覆盖mixin的数据。

但是如果是对象，会递归对比key，如果是同名key则会覆盖，如果不是同名的，则保留。

methods的方法也是一样，会用组件的方法覆盖mixin的同名方法。

除了上面这些选项，还有比如components（组件），和directives(指令)等也是一样的逻辑，同名的会覆盖，以组件的为优先。

“vue的mixin怎么使用”的内容就介绍到这里了，感谢大家的阅读。