VUE mixins使用

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

使用方法：

1、创建混入对象：在src文件夹创建mixins文件夹，再在mixins文件夹下创建一个index.js文件

// 创建一个需要混入的对象 
export default{data(){return {dataMix: '混入对象的data'}},methods:{mixinsFun(){console.log('调用混入对象的methods的函数')}}
}

2、在组件内引入并引用混入

<template><div><div>{
   {data}}</div><div @click="mixinsFun">{
   {dataMix}}</div><input type="text" v-model="testMix"></div>
</template>
import mixins from '@/components/mixins/index'export default {mixins: [mixins],data () {return {data:"这是组件中的数据"}},methods:{fun () {console.log("this.data");}}
}

3、解释

组件中会将混入的数据当成自己组件中的数据使用，会将混入中的方法当成自己组件中的方法调用。

当组件中和混入中含有相同的数据名或是方法名字时，会使用组件中的变量名和方法名。

在组件中和混入中有相同的created()函数时，先执行混入中的created，再执行组件中的created。猜想其它生命周期也应该一样。

再组件中和混入中有相同的watch()函数时，先执行混入中的watch函数再执行组件中的watch函数