Vue之mixins理解与应用
1、什么是mixins
vue提供的一种混合机制,能够更好的实现组件功能复用,混合对象(mixins)可以包含任意组件选项(data、created、mounted、methods、filters等),组件引入后相关选项会进行合并,相当于引入后,父组件各属性进行扩充;
2、方法覆盖
在引入mixins的同时,组件中重复定义,minxins中的属性方法会被覆盖
3、应用
mixin.js
const mixin = { data() { return {
test: 'mixins变量覆盖组件内变量',
} }, created() { console.log('created: from mixins'); }, mounted() { console.log('mounted: from mixins'); } } export default mixin
组件引入mixin.js
import mixin from '@/mixins/mixin';
export default {
data(){
return {
test: '组件变量覆盖mixins变量'
}
},
mixins: [mixin],
created() {
console.log(this.test)
console.log('created: from 当前组件')
},
mounted() {
console.log('mounted: from 当前组件')
},
}
合并后打印情况
--仅用作学习记录