混入概念

• 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能
• 混入对象像正常实例对象一样包含实例选项，这些选项将会被合并到最终的选项中
• 一个混入对象可以包含任意组件选项
• mixins 选项接收一个混入对象的数组
• 功能： 把多个组件共用的配置提取成一个混入对象

 mixins:[mixin]

局部混入

• 在 mixins 目录下创建 index.js，写入需要复用的部分，并对外暴露

 export const mixin = {
   methods:{
     showName(){
       console.log(this.name)
     }
   },
   created(){
     console.log('你好啊');
   }
 }

• 在需要用到的组件中按需引入

 <button @click="showName">输出名字</button>

 import {mixin} from '@/mixins'
 export default {
   data(){
     return{
       name:'App'
     }
   },
   mixins:[mixin]
 };

选项合并

• 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行合并

  • 如果混入包含 created 钩子，而组件本身也有，那么两个钩子都会被调用，并在调用组件自身的钩子之前被调用

   export const mixin = {
     created(){
       console.log('混入中的钩子');
     }
   }
  

   mixins:[mixin],
   created(){
     console.log('组件中的钩子');
   }
  

• 如果混入包含 data 或 methods 在创建组件本身也有，那么则以组件自身的为准

 export const mixin = {
   methods:{
     showName(){
       console.log('混入中的方法')
     }
   }
 }

 methods:{
   showName(){
     console.log('组件中的方法')
   }
 },

注意：数据对象 data 在内部会进行递归合并，重名的数据以组件内为准

• 总结：

  • 同名钩子函数合并为一个数组，都将被调用，混入对象的钩子在组件自身钩子之前调用
  • 值为对象的选项合并为同一个对象，如 methods， 冲突时以组件为准
  • data 会进行递归合并，冲突时以组件数据优先

全局混入

• 混入也可以进行全局注册
• 使用全局混入会影响每一个创建的组件实例

 // main.js
 // 全局挂载混入
 Vue.mixin({
   created () {
     console.log(this.$options.name)
   }
 })
 ​
 new Vue({
   name:'Root',
   render: h => h(App),
 }).$mount('#app')

谨慎使用全局混入，它会影响每个单独创建的组件实例 (包括第三方组件)