混入器 mixin
混入器用于将vue组件中的option进行抽离
- 如果混合器混入的内容也有生命周期函数 那么组件内的生命周期函数会一起执行 且混入器先执行
- 对于除了生命周期的配置而言 如果跟混入的配置重叠 以组件自己声明的为准
- 全局混入的生命周期 优先级会大于局部混入的生命周期
const m1={ //混入器可以配置所有的vue的配置项
data() {
return {
version:'版本1.0.0'
}
},
created() {
console.log('我是mixin m1 的created')
},
}
const m2={
created(){
console.log('我是mixin m2 的created');
},
methods: {
fn1(){
return '我是fn1 返回的字符串'
}
},
}
//全局混入
Vue.mixin({
data(){
return{
slogn:'我喜欢 weekend'
}
},
created(){ //全局混入的生命周期 优先级会大于局部混入的生命周期
console.log('我是全局混入的mixin');
}
})
Vue.component('cp1', {
template: `<div>
<div>version:{{version}}</div>
<div>fn1 : {{fn1()}}</div>
<div>全局混入{{slogn}}</div>
</div>`,
mixins:[m1,m2],
data() {
return {
version:'版本1.0.5' //对于除了生命周期的配置而言 如果跟混入的配置重叠 以组件自己声明的为准
}
},
created(){ //如果混入的内容也有生命周期函数 那么跟组件里的生命周期函数也会一起执行 混入器的先执行
console.log('我是cp1的created');
}
})
Vue.component('cp2', {
template: `<div>
<div> version in cp2: {{version}}</div>
<div>全局混入{{slogn}}</div>
</div>`,
},
mixins:[m1]
})
Vue.component('Parent', {
template: `<div>
<cp1></cp1>
<cp2></cp2>
</div>`,
})
new Vue({
el: '#app',
})