Vue高级特性之mixin混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能，项目中经常使用mixin 抽离公共逻辑。

mixin 支持全局混入和局部混入两种方式，全局混入需谨慎使用，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)！

1. 全局混入

Vue.mixin({
  created: function () {
    console.log("全局混入")
  }
})

2. 局部混入

import mixin1 from './mixin1'
export default {
  mixins:[mixin1]
}

注意：当组件存在与 mixin 对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖 mixin的选项；但是如果相同的选项为生命周期钩子的时候，会合并成一个数组，先执行 mixin 的钩子，再执行组件的钩子。

3. 示例代码

控制元素是否显示，都会使用v-show，如果两个组件中使用的变量和规则都相同，就可以把控制元素显示单独封装成一个mixin.js文件。

# mixin1.js中
export default {
  data() {
    return {
        isShowing: true
    }
  },
  methods: {
    show() { 
        this.isShowing = !this.isShowing
    }
  }
}

# modal.vue中
<template>
  <div id="app">
    <button @click="show()">modal显示与隐藏</button>
    <div v-show="isShowing">modal显示</div>
  </div>
</template>

<script>
import mixin1 from './mixin1'
export default {
  mixins: [mixin1]
}
</script>

# tooltip中
<template>
  <div id="app">
    <button @click="show()">tooltip显示与隐藏</button>
    <div v-show="isShowing">tooltip显示</div>
  </div>
</template>

<script>
import mixin1 from './mixin1'

export default {
  mixins: [mixin1]
}
</script>

End----------------------