可以把多个组件中共有的配置提取出来构成一个混入。
一、配置混入
(一) 创建mixin.js
这里的名字可以自定义,但是为了方便识别,多数场景下都写mixin。
mixin.js 要创建在src目录下,与main.js平级:
(二)配置混入信息
写法和Vue中的配置项的写法一致:
这里配置了两个混入,一个是输出组件中的name属性,一个是往组件中添加x和y属性。
注意:组件需要暴露出去才能被引入
二、引入混入
(一)局部混入
局部混入就是在哪个组件中引用就只能在哪个组件中使用。
使用混入前需要先对混入进行引入,然后再配置mixins:
mixins:[ 混入对象1, 混入对象2 ]
(二)全局混入
在main.js 文件中配置全局混入,引入混入后配置混入:
Vue.mixin( 混入对象 );
配置完成后所有的组件都会拥有x和y属性:
三、混入和组件数据中的优先级
1. 如果是data 和methods 等属性冲突,以组件中的数据为主。
2. 如果组件和混入中都配置了生命周期函数,那么组件和混入中的生命周期函数都会执行。
3. 混入中的生命周期函数优先执行,组件中的生命周期函数再执行。