Vue中mixins的使用方法

概要

mixin(混入)： 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods 、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

具体用法

（1）创建mixins.js文件

let mixin = {
    data(){
        return{
            msg:1
        }
    },
    created(){
        console.log("我是mixin中的created");
    },
    methods:{
        bitCon(info){
            this.msg = info
            console.log("我点击了mixins");
        }
    }
}
export default mixin

（2）局部混入

<template>
    <div>
        来自mixin的：{{msg}}
        <hr>
        <button @click="()=>{bitCon('变')}">变</button>
        <button @click="()=>{add()}">+</button>
    </div>
</template>

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

        };
    },
    created() {

    },
    mounted() {
        
    },
    methods: {
        add(){
            this.msg+=1
        }
    }
};
</script>

<style scoped>

</style>

（3）全局混入

import { createApp } from 'vue'
import App from './App.vue'
import mixins from "./view/mixins";
const app = createApp(App)
# 全局混入
app.mixin(mixins)
app.mount('#app')

效果图片

初始化：

点击后：

注意事项

当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项 但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子。

使用场景

可以定义一个modal弹窗组件，定义一个tooltip提示框