VUE：混入 （mixins）选项的用法

在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。

首先来看看官方文档的介绍：

具体的说，你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。

组件中的mixins接收一个数组作为值。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ form.a }}</h1>
    <button @click="buttonClick">current</button>
  </div>
</template>

<script>
import fun from './mixins/methods.vue'
// import { constants } from 'http2';
export default {
  name: "HelloWorld",
  mixins:[fun],
  created(){
    console.log('这是当前组件')
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    }
  },
  methods:{
    buttonClick(){
      console.log(this.form.a)
      console.log(this.msg)
      this.clickFn();
      this.exm();
    },
    exm(){
      console.log('这是组件的exm方法')
    }
  }
}
</script>

以上代码将一个vue实例作为混入选项。

 <script> 
export default {
  created(){
    console.log('这是混入的组件')
  },
  data() {
    return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
  },
  methods:{
    clickFn(){
      console.log(this.msg)
    },
    exm(){
      console.log('这是混入的exm方法')
    }
  }
}
</script>

混入了一个方法，和两个同名的data数据，以及created函数。

接下来说一下混入的原则：

1、同名钩子函数将会合并成一个数组，都会调用，混入函数先调用

示意如上

2、data选项将会发生一层浅合并（参考原生的Object.assign()方法），属性冲突时以组件属性优先

混入的对象中也有msg属性，和原组件的msg属性冲突，所以msg为组件的dat的msg属性。组件内无form属性，混入了form属性之后也拥有form属性。

3、值为对象的选项，如methods，components，directives等，将会合并为一个新对象，如果键名冲突，组件的key对应的值优先

上图可以看出，在混入的方法内获取data的数据，结果是最终的msg(而非混入的对象的msg)。在两者都有exm方法时，调用的是组件内的exm方法，（这有别于同名钩子函数的调用方式）。

以上就是混入的用法及区别。

也可以将引入的vue对象写成简单的对象

export default {
  created(){
    console.log('这是混入的组件')
  },
  data() {
    return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
  },
  methods:{
    clickFn(){
      console.log(this.msg)
    },
    exm(){
      console.log('这是混入的exm方法')
    }
  }
}

用法没有变化。

自定义混入的方法在此不坐介绍，有兴趣的同学可以去官方文档查看，

vuejs:混入