uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)

更新時間：2023年05月24日 11:22:21 作者：鐵錘妹妹@

這篇文章主要介紹了uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

在做vue項目或者uniapp開發(fā)微信小程序時，經(jīng)常會用到組件之間傳值，因此想總結(jié)記錄下。

一、父子傳值

父向子傳遞：props
子向父傳遞：通過 events（$emit）
父組件想調(diào)用子組件的方法：通過 this.$refs(ref)

a）ref 用在組件可以調(diào)用組件的屬性方法

b）ref 用在標簽可以對標簽進行操作

c) ref屬性不能用在uniapp的內(nèi)置組件上面，只能用在自定義組件上面；用在內(nèi)置組件比如<view>標簽，this.$refs.xxx獲取dom是undefind

父組件調(diào)用子組件的方法

// 父組件
<template>
  <view>
    <view class="index-goods-list-con">
      <WaterfallList
        ref="waterFallCon"
        :status="waterfall.status"
        :list="waterfall.list"
        :reset="waterfall.reset"
        @clickCard="onClickCard"
        @handleGood="handleGood"
        @done="onDone"
      ></WaterfallList>
    </view>
  </view>
</template>
<script>
import WaterfallList from '@/components/waterfall/waterfall-list.vue'
export default {
  data() {
    return {}
  },
  methods: {
    handleDailyBestGood(e, good) {
      // 用$refs賦值調(diào)用子組件的handleDailyBestNum方法
      this.$refs.waterFallCon.handleDailyBestNum(good) 
    },
  },
}
</script>
<style></style>

// 子組件
<template></template>
<script>
export default {
  data() {
    return {
        renderBasic: ''    
    }
  },
  methods: {
     //父組件調(diào)用的方法
     handleDailyBestNum(good) {  
       //good 是父組件彈窗傳遞過來的值，我們可以打印看看
          console.log(good)
          this.renderBasic = good
    },
  },
}
</script>

二、兄弟傳值

借助中間代理， $emit 和 $on

比如在uniapp項目中使用兄弟傳值，vue同理 uniapp頁面通訊官方文檔

a) 說明

b) 使用場景

在商品下單頁點擊選擇優(yōu)惠券，進入優(yōu)惠券頁面，選擇一張適合的，再返回下單頁，需要帶著優(yōu)惠券id返回，現(xiàn)在商品提交訂單頁和優(yōu)惠券頁面是 跨頁面 的。

c) 使用方法

//優(yōu)惠券頁面
 clickCoupon (item) {
      if (this.orderSource) {
      // 觸發(fā)全局自定義事件，傳參id
        uni.$emit('updateData', item.id)  
		uni.navigateBack({
		   delta: 1
		})
      }
    },

 // 從優(yōu)惠券跳回下單頁 
 // 監(jiān)聽全局自定義事件updateData，接收參數(shù)id
    uni.$on('updateData', async function (couponId) {
      that.couponId = couponId
    })

d) 注意事項

uni.$emit、 uni.$on 、 uni.$once 、uni.$off 觸發(fā)的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等
使用時，注意及時銷毀事件監(jiān)聽，比如，頁面 onLoad 里邊 uni.$on 注冊監(jiān)聽，onUnload 里邊uni.$off 移除，或者一次性的事件，直接使用 uni.$once 監(jiān)聽。
注意 uni.$on 定義完成后才能接收到 uni.$emit 傳遞的數(shù)據(jù)

三、祖孫或者更深嵌套的組件間傳值： provide/inject

a) 類型

provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }

b) 詳細

這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在其上下游關(guān)系成立的時間里始終生效。

provide 選項應(yīng)該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的 property。

inject 選項應(yīng)該是：一個字符串?dāng)?shù)組，或一個對象

提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應(yīng)的。

c) 使用場景

如果要將祖先組件直接傳遞給孫子組件，我們要將props逐級傳遞下去：祖先組件 =》子組件 =》孫子組件，而通過provide/inject，可直接從祖先組件傳給孫子組件，即使再嵌套多層也沒關(guān)系。

d) 使用方法

<template>
  <div>
    <button @click="changeMsg">祖組件觸發(fā)</button>
    <h1>祖組件</h1>
    <parent></parent>
  </div>
</template>
<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      developer:'布蘭登·艾奇',
      year:1995,
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, // 方式1.傳入一個可監(jiān)聽的對象
      developerFn:() => this.developer, // 方式2.通過 computed 來計算注入的值
      // developerFn: this.getDeveloper,  方式3.或者調(diào)用一個方法，也能實現(xiàn)響應(yīng)式 
      year: this.year, // 方式4.直接傳值
      app: this, // 方式5. 提供祖先組件的實例 缺點：實例上掛載很多沒有必要的東西 比如：props，methods。
    }
  },
  components: {
    parent,
  },
  methods:{
    getShowCartValue() {
       return this.developer
    },
    changeMsg(){
      this.obj.name = 'Vue';
      this.developer = '尤雨溪';
      this.year = 2014;
      this.update = '2021年6月7日';
    },
  },
}
</script>

子組件

<template>
  <div class="wrap">
    <h4>子組件（只做中轉(zhuǎn)）</h4>
    <child></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components:{
    child,
  },
}
</script>

孫組件

<template>
  <div>
    <h5>孫組件</h5>
    <span>名稱：{{obj.name}}</span> |
    <span>作者：{{developer}}</span> |
    <span>誕生于：{{year}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
<script>
export default {
  computed:{
    developer(){
      return this.developerFn()
    }
  },
  inject:['obj','developerFn','year','app'],
}
</script>

未點擊按鈕，原有狀態(tài)