Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解

更新時間：2023年10月26日 10:15:09 作者：張旭超

這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Vue mixin

Vue中的mixin，是來分發(fā)Vue組件中的可復(fù)用功能。

1、方法和數(shù)據(jù)在各個組件中不共享

不像vuex那樣，一個地方修改其他地方也會修改，mixin的數(shù)據(jù)的作用域就是被引入的組件內(nèi)部。

2、引用組件中的鉤子函數(shù)在混入對象中的鉤子函數(shù)后面執(zhí)行。

3、引用組件中的同名方法會覆蓋混入對象中的方法，不同名的會合并。

案例分析

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、引用組件中的鉤子函數(shù)在混入對象中的鉤子函數(shù)后面執(zhí)行。
    this.mixinData = [
      { name: '初始化數(shù)據(jù)', 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: '初始化數(shù)據(jù)', age: 0 }
    ]
  },
  methods: {
    mixinGetData () {
      let data = [
        { name: 'zxc', age: 32 },
        { name: 'lvy', age: 27 }
      ]
      this.mixinData = data
      return data
    }
  }
}
</script>

以上就是Vue mixin實(shí)現(xiàn)組件功能復(fù)用的詳細(xì)內(nèi)容，更多關(guān)于Vue mixin組件復(fù)用的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue?Canvas實(shí)現(xiàn)電子簽名
這篇文章主要為大家詳細(xì)介紹了Vue?Canvas實(shí)現(xiàn)電子簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
vue項(xiàng)目使用md5加密、crypto-js加密、國密sm3及國密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險的,所以就需要前端一些加密協(xié)議,對密碼、手機(jī)號、身份證號等信息進(jìn)行保護(hù),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用md5加密、crypto-js加密、國密sm3及國密sm4的相關(guān)資料,需要的朋友可以參考下
2022-12-12
15 分鐘掌握vue-next函數(shù)式api(小結(jié))
這篇文章主要介紹了15 分鐘掌握vue-next函數(shù)式api(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue2.0父子組件及非父子組件之間的通信方法
這篇文章給大家介紹了vue2.0父子組件及非父子組件之間的通信方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-01-01
vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce
這篇文章主要介紹了vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
詳解vue-validator（vue驗(yàn)證器）
本篇文章主要介紹了vue-validator（vue驗(yàn)證器）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
vue-router路由懶加載及實(shí)現(xiàn)的3種方式
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
webpack+vue.js實(shí)現(xiàn)組件化詳解
vue的開發(fā)體驗(yàn)還是比較愉悅的。首先文檔非常友好，所以上手會比較快。其次，配合webpack和vue-loader，每個頁面都是一個.vue文件，寫起來很方便。所以很適合做組件化開發(fā)，這篇文章我們就來一起看看webpack+vue.js如何實(shí)現(xiàn)組件化。
2016-10-10
簡單理解vue中track-by屬性
這篇文章主要幫助大家簡單的理解vue中track-by屬性,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
如何封裝Vue Element的table表格組件
這篇文章主要介紹了如何封裝Vue Element的table表格組件，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-02-02