今天聊一下浅析vue混入(mixin)

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

这句话我们可以理解为在js代码中定义一个混入对象，里面可以包含一个组件可以有的任何组件选项:data、method、watch、钩子函数等，使用的话，分为局部混入和全局混入。

首先新建一个mixin.js文件，添加以下代码。

// 混入
export default {
    data() {
        return {
            msg: "Hello Word!"
        };
    },
    created() {},
    computed: {},
    methods: {
        show() {
            console.log(this.msg);
        }
    }
};

这个文件格式应该比较眼熟，一个.vue文件包含template、script、style三个部分，mixin.js这个文件很像script这个部分。对的，script里的data、method、watch、钩子函数等，都可以定义到mixin.js这个文件。那这里面可能就会存在问题，比如mixin.js中的data、method等和引用混入的组件中存在冲突，这时采用组件内部优先。

局部混入

<template>
  <div id="myVue">
    <span @click="show">{{msg}}</span>
  </div>
</template>
<script>
import myMixin from "./mixin.js";
export default {
  name: "myVue",
  mixins: [myMixin],
  created() {
    console.log("组件自身的钩子函数");
  },
};
</script>

首先我们引入mixin.js，然后就可以调用混入的方法和数据

全局混入

在main.js中引入该文件并使用mixin方法进行注册

import Vue from 'vue';
import App from './App';
 
// 增加混入
import myMixin from "@/mixin";
Vue.mixin(myMixin);
 
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

全局注册后，在任意组件都可以使用，谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

正文完
2022-01-06