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>