Mixin模式

98 阅读1分钟

参考:JavaScript编程语言—类—Mixin模式

mixin是一个包含可被其他类使用而无需继承的方法的类。

mixin提供了实现特定行为的方法,但是我们不单独使用它,而是使用它来将这些行为添加到其他类中。

例如,在Vue中,提供了Vue.mixin APImixin类添加到Vue实例上,可以像访问Vue实例属性一样访问mixin类中声明的属性和方法

Vue中的全局混入

// 为自定义的选项 'myOption' 注入一个处理器。 
Vue.mixin({ 
    created: function () { 
        var myOption = this.$options.myOption 
        if (myOption) { 
            console.log(myOption) 
        } 
    } 
}) 

new Vue({ 
    myOption: 'hello!' 
}) 
// => "hello!"

Vue在自定义组件上混入

// 定义一个混入对象 
var myMixin = { 
    created: function () { 
        this.hello() 
    }, 
    methods: { 
        hello: function () { 
            console.log('hello from mixin!') 
        } 
    } 
} 
// 定义一个使用混入对象的组件 
var Component = Vue.extend({ 
    mixins: [myMixin]
}) 

var component = new Component() // => "hello from mixin!"