vue中的mixin理解

一、在mixin中，有共用属性，也有共同的函数方法；

二、如果在当前组件中，不单独设置属性的话，就会调用共用的属性；

三、如果在当前组件中调用共用方法，但是共用数据是在其组件中设置，那么只会更改当前组件中的数据，不影响其它调用组件的数据；

四、尽管两个页面都调用了共同方法，及数据，也不会互相影响（即：mixin中的数据是不共享）

 第一步：创建一个组件页面，用来存放另外两个组件的载体

<template>
    <div>
        <mixin1></mixin1>
        <mixin2></mixin2>
    </div>
</template>

<script>
import mixin1 from './mixin1.vue'//导入组件1
import mixin2 from './mixin2.vue'//导入组件2
import mixin from './mixin'//导入配置共同属性与方法的mixin 文件

export default {
    mixins:[mixin],
    data(){
        return{

        }
    },
    methods:{

    },
    components:{
        mixin1,
        mixin2
    }
}
</script>


<style scoped>

</style>

第二步：创建mixin文件 

export default{
    data(){
        return{
            publicData:'今年是虎年'
        }
    },
    methods:{
        mixinFn(){
            console.log('您调用了mixin中的公用方法')
            this.publicData='今年一定要努力学习换更好的工作'
        }
    },
    mounted(){
        console.log(this.publicData)
    }
}

第三步：创建组件1，并调用自定义的方法更改共同的属性值

<template>
    <div>
        <h6>我是mixin1组件</h6>
        <div>mixin中公用的数据为：{{publicData}}</div>
        <el-button @click="mixinFn">我是mixin1组件用来测试mixin中的公用方法的</el-button>
    </div>
</template>

<script>
import mixin from './mixin'//导入mixin文件
export default {
    mixins:[mixin],
    data(){
        return{

        }
    },
    methods:{
        mixinFn(){
            this.publicData='恩，是的，今年确实是虎年，虎虎生威！'//更改mixin中定义的公共属性值
        }
    }
}
</script>

<style scoped>

</style>

第三步：创建组件2，只调用定义的公共方法

<template>
    <div>
        <h6>我是mixin2组件</h6>
        <div>mixin中公用的数据为：{{publicData}}</div>
        <!-- 这里的方法是在mixin中定义的公共方法 -->
        <el-button @click="mixinFn">我是mixin2组件用来测试mixin中的公用方法的</el-button>
    </div>
</template>

<script>
import mixin from './mixin'
export default {
    mixins:[mixin],

}
</script>

<style scoped>

</style>

以上得到的结果是：

        在组件 1 中，调用自定义的方法更改共同的属性值，只有组件1的值改变了，组件2的值并没          有改变，由此可见，mixin可用共用一个属性，但是不会共享

         在组件 2 中，直接调用的共用方法，也只是更改了组件 2 自身的值，并不会对组件 1 产生影响