一钝的、 介紹

vue中提供了一種混合機制--mixins衩椒，用來更高效的實現(xiàn)組件內(nèi)容的復(fù)用。

• index.vue與mixin.js中的數(shù)據(jù)，計算屬性祈坠，方法等將進(jìn)行合并；
• 如果兩者有相同的數(shù)據(jù)旬迹，index.vue文件將覆蓋前者弄贿；
• 生命周期鉤子入mounted之類的內(nèi)容兩者將都會執(zhí)行，同名的生命周期鉤子湿诊，mixin.js中的內(nèi)容將先執(zhí)行狱杰；
• index.vue和mixin.js中的數(shù)據(jù)可以任意方式組合使用，但是為了提高封裝性厅须，請盡量避免在mixin.js中使用index.vue的數(shù)據(jù)或方法浦旱，可以在mixin.js中設(shè)置默認(rèn)值，在index.vue中重寫mixin.js中的內(nèi)容九杂；
• index.vue可以引入多個mixin颁湖。

二、 使用

mixin.js

export default {
  data () {
    return {
      data1: 'mixin1',
      data2: 'mixin2'
    }
  },
  computed: {
    computed1 () {
      return this.data1 + this.data2
    },
    computed2 () {
      return this.data1 + this.data3
    }
  },
  mounted () {
    console.log('mixin中的mounted')
  },
  methods: {
    handleMethod1 () {
      console.log(
        `mixin中的方法1例隆，
        data1：${this.data1}甥捺，
        computed1：${this.computed1}`
      )
    },
    handleMethod2 () {
      console.log(
        `mixin中的方法2，
        data2：${this.data2}镀层，
        computed2：${this.computed2}`
      )
    }
  }
}

index.vue

<template>
  <div></div>
</template>
<script>
// 引入mixin
import Mixin from './mixin.js'
export default {
  // 使用镰禾，放入一個數(shù)組
  mixins: [Mixin],
  data () {
    return {
      data1: 'index1',
      data3: 'index3'
    }
  },
  computed: {
    computed1 () {
      return this.data1 + this.data2
    },
    computed3 () {
      return this.data2 + this.data3
    }
  },
  mounted () {
    console.log('組件中的mounted')
    this.handleMethod1()
    this.handleMethod2()
    this.handleMethod3()
  },
  methods: {
    handleMethod1 () {
      console.log(
        `組件中的方法1皿曲，
        data1：${this.data1}，
        computed1：${this.computed1}`
      )
    },
    handleMethod3 () {
      console.log(
        `組件中的方法3吴侦，
        data3：${this.data3}屋休，
        computed3：${this.computed3}`
      )
    }
  }
}
</script>

</script>

執(zhí)行結(jié)果

mixin中的mounted
組件中的mounted
組件中的方法1，data1：index1备韧，computed1：index1mixin2
mixin中的方法2劫樟，data2：mixin2，computed2：index1index3
組件中的方法3织堂，data3：index3叠艳，computed3：mixin2index3