vue中混入mixin的理解与使用

混入 mixin

基础

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

mixin 的作用就是实现将多个组件或页面中公用的属性或方法抽取出来单独定义在 mixins 中，当组件中同时声明了和 mixins 中同名的属性或方法，组件里边的属性或方法优先级高于 mixins；当某个组件或页面引用了 minxins 里面的属性或方法，并进行了一些修改操作，这些操作只对当前组件本身有效，不会影响其他组件。

1. 在 src 目录下新建 js 文件夹，新建 mixin.js 文件

let myMixins = {
  // 创建mixins对象，该对象可以有组件中的 data 和 methods 和 所有生命周期
  data() {
    return {
      name: 'jackson',
    }
  },
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('我是混入对象mixins')
    }
  }
}
export default myMixins;

组件目录

在子组件 childOne.vue 和 子组件 childTwo.vue 中都引入 mixin.js 文件

<template>
  <div>
    <p>子组件1</p>
    <!-- 直接使用 mixin 中 data 定义的 name 属性 -->
    {{name}}
  </div>
</template>

<script>
import myMixin from '../../../js/mixin'
export default {
  // 混入的固定写法
  mixins: [myMixin],
  name: 'childOne',
  data() {
    return {
    }
  }
}
</script>

当在需要用到 name 属性的组件中引用了 mixin 文件中的 name 属性

选项合并

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

childTwo.vue 组件中未设置 name 属性。结果如图

mixin.js 中的方法被调用了两次，两个子组件各自调用了一次

当在 childOne.vue 组件中也设置和混入对象同名的hello 方法时，而 childTwo.vue 中未设置

结果：子组件1中调用的是自身定义的 hello 方法，子组件2中调用的是 mixin 中定义的 hello 方法。
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用



值为对象的选项，例如 methods，components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

总结

• 开发中，可以单独创建一个 js 文件，在该文件中声明一个 mixins 对象，然后将组件或页面公用的属性或方法定义在 mixins 里面，并将对象暴露出去，在需要使用到的组件中引入该 js 文件即可。
• 当组件中定义了相同的属性或方法时，组件里声明的属性和方法，优先级高于 mixins。
• 虽然 mixins 中的属性或方法可以被多个组件或页面共用，但是在某个组件或页面中修改相关属性或方法时，不会对其他组件或页面造成影响。
• 同名钩子函数将合并为一个数组，因此都将被调用，只是，混入对象的钩子函数将在组件自身的钩子函数之前调用。