何为混入?
混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”。但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同的配置项中,有着不同的混入策略。
为啥要用混入?
vue中的混入,可以在一定程度上提高代码的复用性。
开始使用
全局混入:
Vue.mixin({
created: function () {
console.log('混入进来了')
}
})
局部混入:
var mixin = {
created: function () {
console.log('混入进来了')
}
}
export default {
mixins: [mixin]
}
混入策略
我们学会了混入,当然我们需要更好的控制混入的规则就需要学习混入策略
var mixin = {
data() {
return {
myOption: '混入进来了'
}
}
export default {
mixins: [mixin],
data() {
return {
myOption: '我是组件里面的'
},
created: function () {
console.log(this.myOption) // 混入进来了
}
}
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
return toVal || fromVal //当我们混入的值不为空则显示我们混入的值
}
网友评论