vue中mixins——混入

概念：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

1、 用法：

1.1 创建混入对象：创建mixins文件夹，在mixins文件夹下创建一个index.js文件

// 创建一个需要混入的对象 
export const mixinstest = {
    data(){
        return {
            testData: '混入对象的data'
        }
    },
    created(){
        console.log('这是混入对象的created')
    },
    methods:{
        mixinsFun(){
            console.log('调用混入对象的methods的函数')
        }
    },
    computed:{
       testData2(){
            return this.testData+'：这是混入对象计算结果。'
        }
    },
    watch: {
        testData(newVal,oldVal){
            console.log('混入对象的watch')
        }
    }
}

1.2 在组件内引入并引用混入

<template>
    <div>
        <div>{{testData}}</div>
        <div @click="mixinsFun">{{testData}}</div>
        <input type="text" v-model="testData">
        <div>{{testData2}}</div>
    </div>
</template>
<script>
import {mixinstest} from '../mixins/index' 
export default {
    mixins: [mixinstest],
    data (){
        return {
            testData:'这是组件的数据'
        }
    },
    created(){
        console.log('这是组件的created')
    },
    methods: {
        mixinsFun(){
            console.log('调用组件的methods的函数')
        }
    },
    computed:{
        testData2(){
            return this.testData+':这是组件计算结果'
        }
    },
    watch: {
        testData(newVal,oldVal){
            console.log('组件的watch')
        }
    }
}
</script>
<style>

</style>

1.3 解释

1. 当在组件中和混入中有相同的‘testData’这个数据时，显示组件中‘testData’对应的数据；当只有混入中有‘testData’数据时，显示混入中‘testData’对应的数据。

2. 在组件中和混入中有相同的函数mixinsFun()时，在组件中调用时，调用的是组件中的mixinsFun()函数；当只有混入中有mixinsFun()函数时，在组件中调用mixinsFun()是调用混入中的。

3. 在组件中和混入中有相同的computed函数testData2()时，在组件中调用时，调用的是组件中的testData2()函数；当只有混入中有computed函数testData2()时，在组件中调用testData2()是调用混入中的。

4. 在组件中和混入中有相同的created()函数时，先执行混入中的created,再执行组件中的created。其他生命周期也一样。

5. 在组件中和混入中有相同的watch()函数testData时，先执行混入中watch的testData,再执行组件中watch的testData。

2、 mixins的特点

2.1 方法和参数在各组件中不共享

混合对象中的参数num

export const myMixin = {
    data(){
        return {
            num:1
        }
    },
    created(){
        this.console()
    },
    methods:{
        console(){
            console.log('从 mixin 打印的')
        }
    }
}

组件1中的参数num进行+1的操作

<template>
    <div>
       template1里的num:{{num}}
    </div>
</template>
<script>
import {myMixin} from './index' 
export default {
    mixins: [myMixin],
    created(){
       this.num++;
	   console.log(`组件1：${this.num}`)
    }
}
</script>

组件2中的参数num未进行操作

<template>
    <div>
       template2里的num:{{num}}
    </div>
</template>
<script>
import {myMixin} from './index' 
export default {
    mixins: [myMixin],
	created(){
	   console.log(`组件2：${this.num}`)
	}
}
</script>

两组件中分别输出的num值

可以看出，组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值

2.2 值为对象的选项，如methods，components等，选项会被合并，两个对象键名冲突时，取组件对象的键值对。

混入对象中的方法

export const myMixin = {
    data(){
        return {
            //num:1
        }
    },
    created(){
        //this.console()
    },
    methods:{
        fun1(){
			console.log('fun1 from mixin')
		},
		fun2(){
			console.log('fun2 from mixin')
		}
    }
}

组件中的方法

<template>
    <div>
       template
    </div>
</template>
<script>
import {myMixin} from './index' 
export default {
    mixins: [myMixin],
    created(){
       this.funself1()
	   this.fun1()
	   this.fun2()
    },
	methods:{
		funself1(){
			console.log('funself1 from template')
		},
		fun2(){
			console.log('fun2 from template')
		}
	}
}
</script>

打印台的输出

2.3 值为函数的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

混入对象函数中的console

export const myMixin = {
    data(){
        return {
            //num:1
        }
    },
    created(){
        console.log('我是混入中打印的内容')
    }
}

组件函数中的console

<template>
    <div>
       template
    </div>
</template>
<script>
import {myMixin} from './index' 
export default {
    mixins: [myMixin],
    created(){
       console.log('我是组件中打印的内容')
    }
}
</script>

打印台的打印

与vuex的区别
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。