Element组件引起的Vue中mixins使用，写出高复用组件

咱们都知道 Vue 采用的是一种组件化开发模式，组件在 Vue 中一个很是重要的核心概念。每一个组件都是一个完整的实例，组件的建立，组件间的通信，组件如何更好的复用，以及整个的生命周期的钩子。因此你会发现它都是围绕组件展开的。

咱们就来讲说如何建立一个灵活的高复用的组件。以前分享过一篇「slot」内容分发的文章，它可让咱们组件的内容更加的灵活。有兴趣的能够看下。

《Vue一个案例引起「内容分发slot」的最全总结.md》

今天主要分享的是组件中另外一种分发，功能的分发「mixins」，也叫混入。在开始以前呢，咱们先看个案例，先从案例中看出个大概，而后带着问题去学习知识点会更加的高效，这也是我我的比较经常使用的学习方式。

在 Element（一款优秀的组件库）中有这么两个组件MessageBox 与 Dialog。

官方说法：

从场景上说，MessageBox 的做用是美化系统自带的 alert、confirm 和 prompt，所以适合展现较为简单的内容。若是须要弹出较为复杂的内容，请使用 Dialog。

因此你会发现，这两个组件很是的类似，他们共享一些相同的基本功能，如：打开/关闭之间的状态切换。但用法上又各有不一样。请看下面的例子

// Message Box
<template>
  <el-button type="text" @click="open">打开 Message Box</el-button>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操做将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '肯定',
          cancelButtonText: '取消'
        })
      }
    }
  }
</script>

// Dialog
<el-button type="text" @click="dialogVisible = true">打开 Dialog</el-button>
<el-dialog
  :visible.sync="dialogVisible">
  <span>这是一段信息</span>
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    }
  };
</script>

类似的组件，相同基本功能，这时你不得不作出选择，是将它们分红两个不一样的组件？仍是只保留一个？

显然这两种作法都不完美，若是分红两个组件，后期有功能的变更话，就会去修改屡次，带来维护成本。若是保留一个，可是用法上又各有不一样，这可怎么办呢？

有同窗也会有疑问，不就两个组件吗？能带来多少维护成本？其实不只如此，相似于这种状态切换的功能还有提示框，弹出框等等。

因此 Vue 给咱们提供了一种方案叫功能的分发「mixins」。

什么是 Mixins

官方说法：混入 (mixins) 是一种分发 Vue 组件中可复用功能的很是灵活的方式。

简单来讲就是可让不一样的组件「共用」某个功能。

Mixins 对象能够包含 Vue 实例中的全部选项，当组件使用 Mixins 对象时，Mixins 对象中的全部选项将和组件中的选项进行合并。

既然如此那咱们就来尝试用 Mixins 对象 去修改上面两个组件。让它们能够共用一个方法。如下组件都是本身书写的简单实现，只实现状态切换的基本功能。

//mixins.js
export const showMixin = {
  data: function () {
    return {
      isShowing: true
    };
  },
  methods: {
    toggle() {
      this.isShowing = !this.isShowing;
    }
  }
}

//MessageBox
<template>
  <div class="panel-box">
    //省略
  </div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {
  name: "MessageBox",
  mixins: [showMixin]
};

//DialogBox
<template>
  <div class="panel-box">
    //省略
  </div>
</template>
<script>
import { showMixin } from "./mixins.js";
export default {
  name: "DialogBox",
  mixins: [showMixin]
};
</script>

能够看到，咱们把两个组件的相同功能给剥离出来，采用 mixins 对象的方式而后在组件中引入便可，这样以来组件就会有更好的灵活性。

有聪明的小伙伴应该就会有疑问了，若是 mixins 对象中的选项和组件实例中的选项相同时会怎么办？这也是咱们下面要说到的问题，Vue 中给出了咱们几个决策机制，一块儿来看看。

选项的合并

1. data 对象的合并

当组件与混入对象的 data 对象发生冲突时，以组件中的优先，如何没有冲突将会进行递归合并。

const mixin = {
  data: function() {
    return {
      hero: "蛮三刀",
      text: "来自mixins中的「上单一霸」"
    };
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  data() {
    return {
      text: "来自组件中的「上单一霸」"
    };
  },
  mounted() {
    console.log(this.$data); 
    // {hero: "蛮三刀",text: "来自组件中的「上单一霸」"}
  }
};

1. 钩子函数的合并

钩子函数将会被所有调用，由于同名钩子函数将会被合并成一个数组，但 mixins 中的钩子会优先于组件中的钩子执行。

const mixin = {
  created() {
    console.log("mixins中的上单一霸");
  },
  mounted() {
    console.log("mixins中的中单一霸");
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  created() {
    console.log("组件中的上单一霸");
  },
  mounted() {
    console.log("组件中的中单一霸");
  }
};
//mixins中的上单一霸
//组件中的上单一霸
//mixins中的中单一霸
//组件中的中单一霸

3.值为对象类型的合并

像methods、watch等值为对象类型的会合并成一个对象，若有冲突将采用组件中的。

const mixin = {
  methods: {
    say() {
      console.log("mixins组件上单一霸");
    },
    do() {
      console.log("mixins偷塔");
    }
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  methods: {
    say() {
      console.log("组件上单一霸");
    }
  },
  mounted() {
    this.say(); //组件上单一霸
    this.do(); //mixins偷塔
  }
};

经过上面一些案例的解释，你应该熟悉了如何利用 混入对象去建立一个高复用组件了，不妨去尝试一下。

最后，但愿你们可以有所收获。若是你以为本文不错欢迎点赞转发。

关注微信公众号：六小登登，学习更多干货文章，领取全套学习资源。