vue - minix混入
vue中混入是是实现类继承的重要方式。 混入的规则实例minix.jsexport default {data () {return {name: 'minix',minixName: 'minixObj',...
·
vue中混入是是实现类继承的重要方式。
混入的规则实例
minix.js
export default {
data () {
return {
name: 'minix',
minixName: 'minixObj',
flag: false,
obj: {
class: 'classtest',
id: 'idtest'
}
}
},
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],
obj: {
todoclass: 'todoclasstest',
id: 'idtodotest'
}
}
},
mounted() {
console.log('todoMounted');
},
mixins : [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没有的,minix会被添加进来
flag: false, // todo没有的,会被添加进来
obj: { // 对象时,整个对象会进行合并,相同属性名的组件会进行覆盖
class: 'classtest',
todoclass: 'todoclasstest',
id: 'idtodotest'
}
}
},
mounted() {
// 在钩子函数中的, 会被合并到todo.vue 的钩子函数中, minix中的代码在前,自己的在后
console.log('minixMounted');
console.log('todoMounted');
},
methods: {
// 重复方法会被覆盖
speak () {
console.log('this is todo');
},
// 自己独有的,保留
submit() {
console.log('submit');
},
// 自己没有的方法会被添加进来
getData() {
return '100';
}
}
}
转载于https://www.cnblogs.com/hanguozhi/p/10407105.html
更多推荐
已为社区贡献16条内容
所有评论(0)