Vue混入 Vue Mixin

混入 (mixin) ，混入对象将被“混合”进入组件。 实现功能和逻辑的复用。

 

定义一个混入对象

const mymix={

    data:function(){
        return {
          aaa:'111111111111',
          bbb:'2222222222'
        }
    },
    created: function () {
        this.hello()
    },
      methods: {
        hello: function () {
          console.log('hello from mixin!')
        }
      }
}

export default mymix

组件内部引用混入

<template>
  <div class="about">
    <div>
      <h1 >{{aaa}}</h1>
    </div>
  </div>
</template>


<script>
 
import Vue from 'vue'
import mymix from '../mixins/mymix'
export default {
  name: 'About',
  components: {
    
  },
  mixins:[mymix],
  mounted(){
     
  }
}

</script>

选项合并

1、数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
2、同名钩子函数将合并为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
3、值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

 

全局混入

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