Vue学习第12天——分析vue混入(mixin)的使用方法

一、基础概念

mixin官方定义

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

理解

将多个组件共用的配置提取成一个混入对象，哪个组件需要用到这些配置时，直接将提取出来的这部分混入（mixin）到组件内部即可

优点

减少代码冗余度，方便后期更好的维护
（mixin相当于组件中的组件，vue组件化开发让我们的代码复用性更高，但是组件与组件之间还有重复的部分，这时我们用mixin将重复的部分再抽离出来）

二、进阶使用

mixin就是一个对象，这个对象内饱含着vue中常用的配置项（data，methods，mounted等）

1、定义混入

在src目录下新建一个mixin.js的文件，里面用写mixin的代码

{
	data() {...},
	methods:{...},
	...
}

2、使用混入

根据不同的业务要求，使用混入分为两种情况：局部混入和全局混入。
局部混入代表哪里组件使用在哪里引入，全局混入表示任何组件都可以使用。

全局混入:：Vue.mixin(xxx)
局部混入：mixins:[xxx]

三、实战练习

1、定义一个混入

export const hunhe= {
   methods: {
        showName(){
            console.log(this.name)
        }
   },
}

我们已经定义完一个混入mixin，接下来该去使用混入。

2、局部混入

<template>
    <div>
        <p>学生姓名：{{name}}p>
        <button @click="showName">点击弹出学生姓名button>
    div>
template>

<script>
//引入mixin
import {hunhe} from "../mixin"
export default {
    name:"Student",
    data(){
        return {
            name:"憨瓜"
        }
    },
    //使用混入
    mixins:[hunhe]
}
script>

3、全局混入

在main.js文件中引入混入，使用混入

import Vue from "vue";
import App from "./App.vue";

//引入混入
import { hunhe} from "./mixin";
//使用混入
Vue.mixin(hunhe);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

以上代码配置完成后，Vue实例对象vm和所有组件实例对象身上都有混入

配置项冲突

1、混入中的data，methods和组件中的data，methods冲突时，以组件中的data和方法为主
2、生命周期钩子冲突时，两者都会出现，并且mixin的先执行

export const hunhe= {
   methods: {
        showName(){
            console.log(this.name)
        }
   },
   //mixin中的数据与组件中的数据冲突，以组件中的数据为主
    data(){
        return {
            x:7
        }
    },
    //生命周期与原组件的冲突，两者都会执行，但mixin中的先执行
    mounted() {
        console.log('我是mixin的，我先输出')
    },
}