开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~
📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

概念

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

📝举个栗子

<script>
var Mixins = {
  created() {
    console.log("我是Mixins");
  },
};
new Vue({
  el: "#app",
  mixins: [Mixins],
  created() {
    console.log("我是app");
  },
});
// 我是Mixins
// 我是app
</script>

可以看出，mixins比组件先执行

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

📝举个栗子

<script>
var Mixins = {
  data: {
    msg: "msg",
    msg1: "msg1",
  },
  created() {
    console.log("我是组件的msg2：" + this.msg2);
  },
};
new Vue({
  mixins: [Mixins],
  el: "#app",
  data: {
    msg: "#app",
    msg2: "msg2",
  },
  created() {
    console.log(this.msg);// 当组件和混入的重合的时候，以组件为主 // 打印 #app
    console.log("我是混入对象中的msg1：" + this.msg1);
  },
});
</script>
// 打印如下
// 我是组件的msg2：msg2
// #app
// 我是混入对象中的msg1：msg1

普通方法合并

当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对

📝举个栗子

<script>
var Mixins = {
  methods: {
    mixin: function () {
      console.log("Mixin");
    },
    mixinTwo: function () {
      console.log("MixinTwo");
    },
  },
};
new Vue({
  el: "#app",
  mixins: [Mixins],
  methods: {
    mixin: function () {
      console.log("#app");
    },
  },
  mounted() {
    this.mixin();
    this.mixinTwo();
  },
});
// 打印如下
// #app
// MixinTwo
</script>

局部混入

在 components 目录下创建一个mixins文件夹，并在 mixins 目录下创建一个 mixin.js 文件

📝举个栗子

mixin.js代码

<script>
const mixin = {
  data() {
    return {
      msg: "mixin",
    };
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + "，mixin混入方法");
    },
  },
};
export default mixin;
</script>

页面引入并使用

<template>
  <div>{{ msg }}</div>
</template>
<script>
import mixin from "../mixins/mixin";
export default {
  mixins: [mixin],
  data() {
    return {};
  },
  mounted() {
    this.mixinMethod();
  },
};
</script>

全局混入

在 HTML 中全局混入，一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例

<script>
Vue.mixin({
  methods: {
    mixinOne: function () {
      console.log("mixinOne");
    },
  },
});
new Vue({
  el: "#app",
  methods: {
    mixinTwo: function () {
      console.log("mixinTwo");
    },
  },
  mounted() {
    this.mixinOne();
    this.mixinTwo();
  },
});
// 打印如下
// mixinOne
// mixinTwo
</script>

在 Vue 项目中全局混入

main.js 中代码

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.mixin({
  data() {
    return {
      msg: 'minix'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + '，mixin混入方法')
    }
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在组件中直接使用

<template>
  <div>{{ msg }}</div>
</template>
  <script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.mixinMethod();
  },
};
</script>