vue中的混入

基础

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

var minxin = {
  created () {
    this.hello();
  },
  methods: {
    hello () {
      console.log('hello，我是混入中的函数');
    },
  }
}

Vue.component('my-cmp', {
  mixins: [mixin],
  template: `
    <div>xx</div>
  `
})

局部混入

在 components 目录下创建一个mixins文件夹，并在 mixins 目录下创建一个 mixin.js 文件
 在 mixin.js 文件里写入如下代码

const mixin = {
  data() {
    return {
      msg: '哈哈'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
}

export default mixin

在需要的页面引入并使用，组件A.vue

<template>
	<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
	mixins: [mixin],
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// 哈哈，这是mixin混入的方法

选项合并的冲突解决

• 如果组件自身的数据和混入的数据发生了冲突，那么会使用组件自身的数据
• 合并钩子函数，将合并为一个数组，先调用混入对象的钩子，再调用组件自身的钩子
• 合并值为对象的选项，如methods、components 等，将被合并为同一个对象，两个对象键名冲突时，取组件对象的键值对。

全局混入

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

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created () {
    var myOption = this.$options.myOption
    // 只有其他组件中有这个选项，才会执行
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})