混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
混入对象的钩子将在组件自身钩子之前调用。
// minxin.js const mixin = { data() { return{ msg1: '我是混入内容1', msg2: '我是混入内容2' } }, created() { console.log(this.msg3) } } export default mixin; ... // 页面组件// 我是组件内容2 // 我是混入内容2 // 我是组件内容1
当混合值为对象的选项时,例如 methods、components、directive,将被混合为同一个对象,两个对象键名冲突时,取组件对象的键值对。
在componnets目录下新建mixins文件夹,并在mixins目录下创建一个mixin.js文件,代码如下:
const mixin = { data() { return { msg: "hello" } }, methods: { mixinMethod() { console.log(this.msg + ',这是mixin混入方法') } } } export default mixin;
在需要的页面中引入:
{{msg}}
1.页面和mixin的created都会执行,先执行mixin的,再执行当前页面的;
2.当前页面可以访问mixin的data和methods;
3.mixin里的方法可以调用页面的data和methods;
4.可以在当前页面改变mixin里的data
注意:当本组件与mixin有同名方法或同名数据时,优先调用本组件的方法或数据,混入的部分失效