Mixin混入

混入注意

---

混入

1 加入多个组件需要用到相同的属性、方法、监听器、计算属性…此时就可以定义一个公共混入 2 定义混入 混入的结构和组件结构一致 3 使用混入 在需要使用混入的组件中增加mixins属性 属性值为数组 ，数组里面放需要 使用的混入（可以多个） 例如：

// Home组件和News组件都需要用到msg和changeMsg事件 //定义一个混入 const mixin1 = { data () { return { msg:"hello" } }, methods: { changeMsg () { this.msg = "改变了" } } } let Home = { template:` <div> home组件 {{ msg }} <button @click="changeMsg">按钮</button> </div>`, mixins:[mixin1]//将定义好的混入放到数组中 } let News = { template:` <div> news组件 {{ msg }} </div>`, mixins:[mixin1]//将定义好的混入放到数组中 } Vue.component('Home',Home) Vue.component('News',News) let vm = new Vue({ el:'#app', data: { } })

注意

如果混入里面的属性与组件中的属性冲突时，则会优先使用组件中的属性

//混入中存在 msg 为 hello const mixin1 = { data () { return { msg:"hello" } }, methods: { changeMsg () { this.msg = "改变了" } } } //此时Home组件中也存在 msg 为 123 let Home = { data () { return { msg:123 } }, template:` <div> home组件 {{ msg }} <button @click="changeMsg">按钮</button> </div>`, mixins:[mixin1]//将定义好的混入放到数组中 } // 此时msg在页面中显示的是Home组件中的msg 123