vue中使⽤minix(混⼊)的使⽤
⽬录
1.是什么
混⼊ (mixin) 提供了⼀种⾮常灵活的⽅式,来分发 Vue 组件中的可复⽤功能。⼀个混⼊对象可以包含任意组件选项。当组件使⽤混⼊对象时,所有混⼊对象的选项将被“混合”进⼊该组件本⾝的选项。
2.作⽤
主要作⽤是继承和封装,将⼀些公共的代码抽离,可以减少代码量,提⾼复⽤性。
3.使⽤
以⼀段代码为例,完整的展⽰其使⽤⽅法:
// minix.js
export default {
data () {
return {
name: 'minix',不规则热
minixName: 'minixObj',
flag: fal
}
},
mounted() {
console.log('minixMounted');
},
methods: {
speak() {
console.log('this is minix');
},
getData() {
return '100';
}
}
}
// todo.vue
import myMinix from './minix';
export default {
data () {
节水格言
return {
name: 'todo',
lists: [1, 2, 3, 4]
}
},
mounted() {
console.log('todoMounted');
},
minixs: [myMinix], // todo.vue 中声明minix 进⾏混合
methods: {
speak () {
console.log('this is todo');
},吕皇后
},
submit() {祭祖的诗句
console.log('submit');
},
}
}
//==========
// 最终得到的结果
//==========
export default {
data () {
return {
name: 'todo', // 共同有的data,最后保留⾃⼰的data
lists: [1, 2, 3, 4], // ⾃⼰独有的,保留
minixName: 'minixObj', // todo没有的,会被添加进来
flag: fal // todo没有的,会被添加进来
}
护理安全管理制度},
mounted() {
// 在钩⼦函数中的,会被合并到todo.vue 的钩⼦函数中, minix中的代码在前,⾃⼰的在后 console.log('minixMounted');
console.log('todoMounted');
皮肤呼吸},
methods: {
// 同时有的⽅法,会被封装为⼀个数组,先执⾏minix中的,后执⾏todo⾃⼰的
speak () {
[
function() {
console.log('this is minix');
},
function() {
console.log('this is todo');
}
].forEach(item => {
皱组词组item();
})
},
// ⾃⼰独有的,保留
submit() {
console.log('submit');
},
// ⾃⼰没有的⽅法会被添加进来
getData() {
return '100';
}
}
机灵造句}