Vue mixin 混入

1:介绍:当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

a)组件引入父组件后,时单独开辟了一个区域,两者是两个独立的个体,通过props和事件emit进行联系

单纯组件引用:

父组件+子组件-->>父组件+子组件

b)而mixin是引入一个组件后,把引入的mixin组件跟当前的组件进行合并操作,当data里有相同的数据时,以组件的数据优先;当methods里面方法名有相同时,以组件的方法为优先。如下

mixin引用

mixin对象+组件-->>新组件

2:引入规则

a)相同的数据时,以组件的数据优先

      var model = {
            data() {
                return {
                    message: 'world',
                    message1: 'china'
                }
            }
        }

        new Vue({
            mixins: [model],
            data() {
                return {
                    message1: 'sicuan',
                    message2: 'chengdu'
                }
            },
            created() {
                console.log(this.$data)
            }
        })     
//  { message1: "sicuan", message2: "chengdu", message: "world" }
 
b)同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
        var model = {
            created() {
                console.log('混入对象的钩子被调用')
            }
        }

        new Vue({
            mixins: [model],
            created() {
                console.log('组件钩子被调用')
            }
        })

// => "混入对象的钩子被调用"
// => "组件钩子被调用"
c)值为对象的选项,例如methods,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

猜你喜欢

转载自www.cnblogs.com/yt0817/p/12614285.html