详解Vue文档中几个易忽视部分的剖析

针对Vue文档中部分大家可能不会去研读的内容，我做了个小总结，作为有经验者的快餐，不是特别适合初学者，可能有不妥之处，希望大家多提建议。

节省代码量的mixin

mixin概念：组件级可复用逻辑，包括数据变量/生命周期钩子/公共方法，从而在混入的组件中可以直接使用，不用重复写冗余逻辑(类似继承)

使用方法:

在某一公共文件夹pub下创建mixin文件夹，其下创建mixinTest.js

const mixinTest = {  created() {    console.log(`components ${this.name} created`)  },  methods: {    hello() {      console.log('mixin method hello')    }  }}export default mixinTest

在组件中引用刚才的公共混入文件并使用

import mixinTest from '../pub/mixin/mixinTest.js'export default {  data() {    return {      name: 'hello'    }  },  mixins: [mixinTest],  methods: {    useMixin() {      this.hello()    }  }}

ps: 若是使用Vue.mixin()这个方法，则会影响之后创建的所有Vue示例，慎用！

注意mixin的几个特性:

混入的数据变量是浅合并，冲突时以组件内的数据优先(对象里面的自定义变量) 混入的生命周期函数内的逻辑会与组件内定义的生命周期函数逻辑进行合并，并且先执行(created/mounted/destroy) 混入的值为对象的选项，会混合成一个对象，冲突后也是以组件内键名优先(data/method/components/directives)

slot内容分发

slot概念引入：Vue跟React在写法上的不同就在于组件与子组件内部元素的组织上，在组件里面没有children元素供我们访问和展现(暂不考虑render函数)，取而代之的API是slot

使用场景定义：

自定义的子组件里面有嵌套的HTML或者其他自定义的标签组件 这个自定义的子组件是写在父组件里面，嵌套的东西也放在父组件里面 通过在子组件的模板里面使用<slot></slot>标签，从而达到渲染写在父组件里的嵌套标签的效果 本质是把父组件放在子组件里的内容，插到了子组件的位置，多个标签也会一起被插入

<template>  <div id="app">     <self-component> <!--self-component表示自定义的组件-->      <span>12345</span> <!--父组件里的嵌套标签-->     </self-component>   </div> </template><script>export default {  components: [selfComponent]}</script><!--self-component的组件模板--><template>  <div>    <button><slot></slot></button>  </div></template><script>export default {  // 只有子组件的模板里面有slot标签，才能取到写在自定义组件里面的标签的渲染引用}</script>