Mixin混入

作用

可以将多个组件公用的配置提取成一个混入对象，用来分发Vue组件中的可复用的功能。

在引入组件（js文件）之后，将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并，相当于在引入后，父组件的各种属性方法都被扩充了。

提示

定义共用的变量，引入组件中之后，与原组件发生冲突时（变量名相同时），以原组件数据优先（选择原组件的变量或属性，混入不破坏原有组件只是扩充）。

不过生命周期方法，mounted除外，当都存在时，效果为叠加。

本质

mixin本质就是一个JS对象，可以包含组件中的任意功能选项，如data、components、methods、creaded、computed以及生命周期函数等等，当组件使用mixins对象时所有mixins对象的对象都将被混入该组件本身的选项中来。

使用方法：

1. 定义混合
2. 使用混合

快速使用

以下是一个简单的例子：

// 定义一个混入对象
export const myMixin = {
  data() {
    return {
      message: 'Hello mixin!'
    };
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
};

在组件中使用通过在options中指定mixins属性，将混入对象应用到组件中

mixins:[xx,....]

<template>
  ....
</template>

<script>
	import {myMinxin} from ‘../mx’;
  
  export default {
    name:'Demo',
    dataL(){
      return{
      	name:'san'
   	 }
    },
    mixins:[myMinxin],
    created() {
      this.sayHello(); // 输出 "Hello  mixin!"
    }
</script>

在上面的例子中，定义了一个名为myMixin的混入对象，它包含了一个data属性和一个methods对象。data属性定义了一个名为message的共享数据，methods对象包含了一个名为sayHello的方法，

在Vue组件中，可以通过在options中指定mixins属性，将混入对象应用到组件中。并在created钩子函数中，调用了sayHello方法，输出了共享数据。

混入类型

vue中的混入分为局部混入和全局混入。 局部混入是指通过在组件选项中添加mixins属性，将混入对象作为参数传入；全局混入则需要通过Vue.mixin()方法进行注册

局部混入

上文中的例子就是局部混入。

全局混入

在使用全局混入时要格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例 (包括第三方组件)。

import .....
// 全局混入
Vue.mixin(myMixin);

更多详细讲解请善用官网+搜索

官网混入 (opens new window)

mixins-api (opens new window)