Vue Mixin混入

场景：如果有多个功能非常相似的组件，基本功能也一样，，但是他们之间存在部分差异，如果把他们做成同一个组件，会导致props传值超级麻烦和混乱，如果写成两个组件，一旦功能变动就需要修改多个组件中的代码，变得很麻烦，这个时候你可能会想，有没有一种方式可以将公共代码提出来，不同的功能再进行拆分的写法，答案当然是有的，这里就要提到 vue 中的mixin（混入）

使用方法

首先再组件目录下创建Mixins文件夹，在文件夹路径下创建toggle.js，路径如下：

|components
  |__Mixins
    |__toggles.js

抽离功能一样的代码在mixin中，并暴漏出去

export const changeName = {
  data() {
    return {
      id: 1,
      name: 'zhangsan'
    }
  },
  methods: {
    changeName() {
      this.name = 'lisi'
    }
  }
}

在组件或界面中使用公共代码

import { toggle } from './Mixins/toggle.js'

export default {
  name: '',
  mixins: [toggle],
  components: {}
}

这时会出现一个问题，当组件和mixin中同一个方法在同一个地方调用时，vue会以组件中的为主