VUE 混入 ( mixin )

**VUE****混入  **( mixin )

https://cn.vuejs.org/v2/guide/mixins.html?

• 可复用，灵活 ，就是可以把一些公用的data, method, computed， 生命钩子， 或一系列的属性(name), 以及自定义的属性。自定义指令等反正就是 vue 实例中的一切东西 (script 标签中， 就是 js 文件)。写为一个 mixin 对象。最好在一个 js 文件中，然后 export 导出
• 需要该对象的组件实例，可以直接引入该 mixin.js
• 然后注册于实例的 mixin 属性中
  • 
  • 
• 全局使用，main.js 中

import table from "./mixin/table";
Vue.mixin(table);

• 该组件就会获取 混入对象带来的一系列的方法、对象、属性等。
• 在对生命周期等钩子函数合并后，应用启动后，会先调用混入对象的钩子，再调用组件实例的钩子
• 合并值位对象的选项时，如  methods、components 和 directives，等。如果有键名重复，会取组件实例对象的键值对。

混入还可以以文件的形式导入

js 文件中写，导出要混入的东西。

export default {
  methods: {
    show() {
      alert("ww");
    },
  },
};

组件中导入

script  需要加  type=’module‘

import  混入名 from ‘./mixins**.js**’  这里路径一定要加 ./

组件实例内部调用导入的名字

new Vue({
  mixins: [混入名],
});

注意，当混入的和自己的属性重复的时候，以自己的为准，如果导入的功能重复，以数组中最后一个为准。（后面会覆盖前面的）

通过混入扩展 Vue 构造函数

import show from "./mixins.js";
var Com = Vue.extend({
  mixin: [show],
});

new Com({
  mounted() {
    this.show();
  },
}).$mount("#app");

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

---

// 为自定义的选项 ‘myOption’ 注入一个处理器。

Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption;
    if (myOption) {
      console.log(myOption);
    }
  },
});

new Vue({
  myOption: "hello!",
});
// => "hello!"

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。