// define a mixin objectvar myMixin = {
created: function () {
this.hello()
},methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// define a component that uses this mixinvar Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"复制代码
var Component = Vue.extend({
mixins: [myMixin],created: function () {
console.log('hello from Component!')
}
})
var component = new Component()
// =>// Hello from mixin!// Hello from Component!复制代码
可以看运行结果是先输出了来自 Mixin 的 log,再输出来自组件的 log。
除了生命周期函数以外,再看看对象属性的混入结果:
// define a mixin objectconst myMixin = {
data () {
return {
mixinData: 'data from mixin'
}
}
}
// define a component that uses this mixinvar Component = Vue.extend({
mixins: [myMixin],data () {
return {
componentData: 'data from component'
}
},mounted () {
console.log(this.$data)
}
})
var component = new Component()
复制代码