作用
混入 (mixin) ,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
总结一句:减少代码冗余
使用方法
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
在Vue的实例中配置mixins属性
mixins: [myMixin]
选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'My name is mixin in VueComponment',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// result{ message: "My name is mixin in VueComponment", foo: "abc", bar: "def" }这里的组件中的message覆盖掉了混入的
}
})
钩子
混入的钩子函数会先于组件实例的钩子调用
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
对象
值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
全局混入
混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。、
全局混入一旦使用所有组件实例身上都会有这个混入的对象
//全局混入
Vue.mixin({
data() {
return {
myname: 'mixin',
age: '18'
}
},
methods: {
getusername() {
return this.age;
}
}
})
var vm = new Vue({
el: "#app",
data: {
username: "VueComponment1"
},
mounted() {
console.log(this.getusername())
}
})
result 18