混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
mixin主要是针对vue的js逻辑复用,所以它一般都是js文件。
首先创建一个 mixin 文件夹,然后再在里面创建一个mixin.js文件
然后再创建混入对象:
let mixin = {
data(){
return{
}
},
created() {
},
methods: {
},
}
// 记住,最后一定要导出
export default mixin
在组件中使用混入:
import mixin from '../mixin/mixin.js' // 首先引入这个混入对象
export default {
mixins:[mixin], // 然后注册你引入的这个混入对象
}
创建混入对象的方式还是和上面方法一样
在main.js中引入混入对象并全局注册
import mixin from './mixin/mixin'
Vue.mixin(mixin);
这里需要注意的是,在全局注册混入对象的时候是Vue.mixin(mixin);不是Vue.use(mixin);
请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。
问:那么就会有一个问题,那么如果组件内也定义了同样的钩子函数,同名方法,同名数据,该以谁的为准?是覆盖还是合并?
钩子函数会合并起来,都会执行。先执行mixins的钩子函数再执行组件的钩子函数。
data的同名数据,要分情况讨论:
如果是基本类型,会用组件的同名数据覆盖mixin的数据。
但是如果是对象,会递归对比key,如果是同名key则会覆盖,如果不是同名的,则保留。
methods的方法也是一样,会用组件的方法覆盖mixin的同名方法。
除了上面这些选项,还有比如
components
(组件),和directives
(指令)等也是一样的逻辑,同名的会覆盖,以组件的为优先。