vue 混入 Mixin

可以在多个组件间横向复用代码，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
混入和组件data中数据,方法、计算属性等合并，重名的就用组件的覆盖混入对象的，生命周期的钩子，都会执行，不会覆盖。
组件可以时访问混入数据，选项，反之
示例：

<div id="app">
    <!-- 使用组件 -->
    <my-component></my-component>
</div>
<!-- 组件模板 子组件-->
<template id="mycomponent">
    <div>
        {{ msg }}
        <button @click="getInfo">点击执行混入方法</button>
    </div>
</template>
<script>
    // 定义混入对象
    let mixin = {
        data(){
           return {
               msg:"混入"
            }
        },
        methods:{
            getInfo(){
                console.log("混入方法")
            }
        }
    }

    // 子组件选项对象
    let MyComponent = {
        mixins:[mixin],//将混入对象里的内容添加到当前组件中去，混入对象可以引用几乎任何Vue组件所能引用的东西
        template: `#mycomponent`,
        data(){
            return{
               counter:0
            } 
        },
        methods：{}
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{},
        components: {
            MyComponent
        }
    })
</script>

显示结果：

image.png

Vue已经自动将混入对象里的内容添加到组件中去了, 或者可以说是混入到组件内了，
混入对象可以引用几乎任何Vue组件所能引用的东西, 就好像他是组件本身的一部分

混入对象与组件的选项合并
如果混入对象和组件间有重复的选项,如果重名的方法或者都有同一个生命周期的钩子函数,根据他们的类型,Vue会区别对待
2.1 数据对象合并
数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
示例代码如下:

<script>
    // 定义混入对象
    let mixin = {
        data() {
            return {
                message: 'hello',
                foo: 'abc'
            }
        }
    }

    //  组件选项对象
    let MyComponent = {
        mixins: [mixin],
        template:"<div></div>",
        data() {
            return {
                message: 'goodbye',
                bar: 'def'
            }
        },
        created(){
            console.log(this.$data)
            //  => { message: "goodbye", foo: "abc", bar: "def" }
        }

    };

    //  实例中注册组件
    const vm = new Vue({
        el: "#app",
        data: {},
        components: {
            MyComponent
        }
    })
</script>

image.png

vue 混入 Mixin

推荐阅读更多精彩内容