关于vue.js:vuejs中mixin的使用

Vue 中的 mixin，是来散发 Vue 组件中的可复用性能。

1、办法和数据在各个组件中不共享

不像 vuex 那样，一个中央批改其余中央也会批改，mixin 的数据的作用域就是被引入的组件外部。

2、援用组件中的钩子函数在混入对象中的钩子函数前面执行。

3、援用组件中的同名办法会笼罩混入对象中的办法，不同名的会合并。

4、案例剖析

HelloWorld.vue

<template>
  <div class="hello">
    <div v-for="(item, index) in mixinData" :key="index">
      姓名：{{item.name}}，年龄：{{item.age}}
    </div>
  </div>
</template>
<script>
import CommonMethods from '../mixin/CommonMethods.vue'
export default {
  name: 'HelloWorld',
  mixins: [CommonMethods],
  data () {
    return {msg: 'Welcome to Your Vue.js App'}
  },
  mounted () {
    // 1、援用组件中的钩子函数在混入对象中的钩子函数前面执行。this.mixinData = [{ name: '初始化数据', age: 10}
    ]
    // 2、援用组件中的同名办法会笼罩混入对象中的办法，不同名的会合并。this.mixinGetData()},
  methods: {mixinGetData () {this.mixinData = []
      return []}
  }
}
</script>

CommonMethods.vue

<script>
export default {
  name: 'mixinMethods',
  data () {
    return {mixinData: []
    }
  },
  mounted () {
    this.mixinData = [{ name: '初始化数据', age: 0}
    ]
  },
  methods: {mixinGetData () {
      let data = [{ name: 'zxc', age: 32},
        {name: 'lvy', age: 27}
      ]
      this.mixinData = data
      return data
    }
  }
}
</script>