js之Vue mixins（混入） 附代码示例详解

mixins 我们称它为 “混入” ；

官方的解释：

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

简单理解它的作用：

可复用组件中的功能，可以理解为一个公用的组件对象，定义一个混入对象以后，在其它的组件中引入该对象，就相当该对象中的东西都在组件中一样，在发生冲突时以组件数据优先；

下面我们来看怎么定义和使用它；

1. 新建一个文件，文件名为: myMixin.vue；

页面说明：该文件的作用是定义一个混入对象。在组件created的时候，执行hello方法，打印日志

// 定义一个混入对象
import Vue from 'vue'
 
export const myMixin = {
  data(){
    return {
    }
  },
  created: function () {
    this.hello(1)
  },
  methods: {
    hello: function (num) {
      console.log('hello from mixin!',num)
    }
  }
}

2. 在页面组件 home.vue 中引用混入对象。在组件created的时候，执行hello方法，打印日志，因为引入了 myMixin，所以可以使用 myMixin 里面的方法和数据。

<template>
</template>
<script>
  import { myMixin } from '@/mixins/myMixin'
  export default {
    mixins: [myMixin],
    data() {
      return {
      }
    },
    created: function () {
      this.hello(2)
    },
  }
</script>

最终结果：

在home页面 执行 created 的时候，会执行两遍hello函数。

打印出日志

hello from mixin! 1

hello from mixin! 2