vue.js中mixin的使用。

張旭超發表於2021-12-22

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>

相關文章