Vue mixin实现组件功能复用示例详解

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

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