Vue mixin

mixin 抽离组件公共逻辑，好处是方便维护，只要在mixin中进行一次修改，就可以将所有引入了mixin的组件内公共逻辑一次性修改。

mixin.js文件，文件名可以自定义

// 抽离组件公共逻辑，方便维护
export default {
  data () {
    return {
      mixinData: '我是公共数据'
      // 公共数据
    }
  },
  methods: {
    // 公共方法
  },
  mounted () {
    // 公共钩子
  }
  // 等等
}

拥有公共逻辑的组件一

// 在组件中可以使用
<template>
  <!-- mixin中定义的数据可以直接使用了 -->
  <div>{{mixinData}}</div>
</template>

<script>

import mixin from 'mixin文件的路径';

export default {
  mixins: [mixin], // 可以有多个mixin，直接在页面中就可以使用mixin文件定义的逻辑
  // ...
}
</script>

<style>

</style>

拥有公共逻辑的组件二

// 在组件中可以使用
<template>
  <!-- mixin中定义的数据可以直接使用了 -->
  <div>{{mixinData}}</div>
</template>

<script>

import mixin from 'mixin文件的路径';

export default {
  mixins: [mixin], // 可以有多个mixin，直接在页面中就可以使用mixin文件定义的逻辑
  // ...
}
</script>

<style>

</style>

mixin文件中的mixinData修改了，引用到的两个组件内的数据就一起修改了，不用在

两个组件内进行修改了，如果引用的组件多的话，就更能体现出mixin的方便维护的好处了。

这里的两个组件是一样的（为了偷懒，哈哈），达到效果就好了。