关于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>