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函数