什么是Mixin?如何使用Mixin 定义mixin

一、什么是Mixin？

Mixins(混入)：当我们存在多个组件中的逻辑或者配置(数据或者功能很相近)，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，且组件调用他们是不会改变函数作用域外部。减少代码冗余度，也可以让后期维护起来更加容易。

注意：提取的是逻辑或配置，而不是HTML代码和CSS代码。

Mixins(混入)：官网解释请看这里https://v2.cn.vuejs.org/v2/guide/mixins.html

如何使用Mixin 定义mixin

mixins它就是一个对象，这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。在我们的项目中新建mixins文件夹，然后新建index.js文件存放mixin代码。

// src/mixins/index.js
export const mixins = {data() {return {};},computed: {},created() {},mounted() {},methods: {},
};

mixins使用

export const mixins = {data() {return {msg: "我是mixin中的msg",};},computed: {},created() {console.log("mixin中的created生命周期函数");},mounted() {console.log("mixin中的mounted生命周期函数");},methods: {clickMe() {console.log("mixin中的点击事件");},},
};

局部混入

一个组件中改动了mixin中的数据，另一个引用了mixin的组件不会受影响，不同组件中的mixin是相互独立的

A.vue页面(父组件)使用

<template><div><van-button @click="handleChangeMixin">父组件修改mixins</van-button><div>mixins：{{msg}}</div><div><hr></div><mixinsDemo></mixinsDemo></div>
</template>
<script>import {mixins} from "@/mixins/index";import mixinsDemo from "@/components/common/mixinsdemo";export default {mixins: [mixins],components: {mixinsDemo},data() {return {};},created() {},methods: {handleChangeMixin() {console.log("父组件调用minxi数据", this.msg);this.msg = "父组件原mixins的msg已被改了";console.log("父组件更改后的msg:", this.msg);}},};
</script>
<style scoped></style>

B.vue页面(子组件)使用

<template><div><van-button @click="handleMixin">子组件修改mixins</van-button><div>mixins：{{msg}}</div></div>
</template>
<script>import {mixins} from "@/mixins/index";export default {mixins: [mixins],data() {return {};},components: {},created() {},methods: {handleMixin() {console.log("没有修改前的msg", this.msg);this.msg = "子组件原mixins的msg已被改了";console.log("子组件更改后的msg:", this.msg);}},};
</script>
<style scoped></style>

全局混入

main.js中全局引入mixins

import Vue from "vue";
import App from "./App.vue";
import { mixins } from "./mixin/index";
Vue.mixin(mixins);Vue.config.productionTip = false;new Vue({render: (h) => h(App),
}).$mount("#app");

使用：直接注释上面A、B组件中的mixins引入，可以看到效果和局部混入没有任何区别。

注意：谨慎使用全局混入，它会影响每个单独创建的 Vue 实例 (包括第三方组件)，避免重复应用混入