Vue-Mixin

Posted 2021-09-07 。。

vue mixin --- 混入记录文档

1. 什么是mixin混入

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

2. 什么时候需要使用mixin

页面的风格不用，但是执行的方法和需要的数据类似，这时候可以考虑将相同部分封装

3. mixin的特点

• 方法和参数在各组件中不共享，a页面改变了变量值但是b页面取值仍是原来的值。
• methods,components等为对象部分，当混入对象和页面存在相同的方法名的情况将执行页面内的部分。
• created,mounted值为函数的部分，当混入对象和页面存在相同的方法名的情况会先执行混入对象的再执行本页面的方法。

4.怎么使用

在mixin.js中编写一个混入对象, 示例:

export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    toggleShow () {
      this.show = !this.show
    }
  }
}

在页面中即可引入混入对象，这时页面内无需重新定义toggleShow方法和数据show即可直接使用, 示例：

<template>
  <div @click="toggleShow">
    这是测试按钮
  </div>
</template>

<script>
import mixin from \'./mixin/mixin\'
export default {
  name: \'pageA\',
  mixins: [mixin],
  created () {
    this.toggleShow()
  }
}
</script>