vue极其好用的mixin 混入机制

mixin混入机制，简单的来说就是两个组件合并成一个组件
A 混入 B 形成了一个全新的组件C；

结构

A组件

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理1" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理1" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理1" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿1" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
    这是测试Number的值<span class="red">{{number}}</span>
  </div>
</template>

<script>
import {mixinData} from './ceshiMixin'
export default {
  mixins:[mixinData],
    data(){
      return{
        activeName: 'second',
        number:"1"
      }
    },
    methods: {
      
    }
}
</script>

混入的B

export const mixinData={
  data(){
    return{
      // number:"minxin"
    }
  },
  methods: {
    handleClick(tab, event) {
      this.number+=1
      console.log(tab, event);
    }
  }
}

特性

1.对象重名，会被A组件覆盖（除了钩子以外）
2.钩子重名，会形成一个数组 先后都会执行（混入的优先）
3.混入的B可以调用A中的变量，A也可以直接绑定B中的方法（其实你可以看成他们是一个全新的组件）
4.methods、components、directives会执行，当有冲突的时候，实例中的会覆盖mixins中的

适用场景（根据以上两个特性）

1.两个极其相似的组件，但是有个别的差异，例如


这两个页面可能逻辑都一样就是Number值不一样 标题内容不一样，他们的 handleClick事件是公用的 可以取出来

2.一些页面 都会用都同样的方法，这里解决方案一就是全局写一个方法，但是如果这个方法里面要用到很多组件内部的data就比较不好写，这时候混入机制就非常方便，例如下图这个点击事件，非常方便，如果某个组件不想用这个方法火或者逻辑不一样，那么只要在这个组件里单独再重写hadnleClick这个方法，根据特性会去覆盖

总结：总得来说，我的理解就是vue的混入机制就是将多个组件共同拥有的部分抽取出来，写在一个js里混入进去，个别单独处理可以利用对象的覆盖属性，或者钩子的先后性去处理