mixins

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

相当于扩充父组件的属性、方法等,类似于在原型对象中注册方法。

如果在引用mixins的同时,在组件中重复定义相同的方法,则mixins中的方法会被覆盖

<div id="app">
    <child></child>
    <kid></kid>
</div>

//不用minins,同样的方法要定义两次
Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})
 
Vue.component('kid',{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log('Kid foo()'+this.msg++)
        }
    }
})

//用minins,抽取公用的方法和属性,实现了功能的复用
let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

 

posted @ 2020-04-09 13:18  2350305682  阅读(...)  评论(...编辑  收藏