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>