uniapp+Vue3 組件之間的傳值方法示例詳解
更新時間：2025年03月14日 09:56:28 作者：我是陳大大
文章主要介紹了父子傳值、兄弟傳值和provide/inject三種在Vue中進行組件間通信的方法,感興趣的朋友跟隨小編一起看看吧
一、父子傳值（props / $emit 、ref / $refs）
1、props / $emit
父組件通過 props 向子組件傳遞數(shù)據(jù)，子組件通過 $emit 觸發(fā)事件向父組件傳遞數(shù)據(jù)。
父組件：
// 父組件中
<template>
<view class="container">
<view class="row" v-for="(item, index) in listData" :key="item.pkId">
<newsbox pageTitle="待辦" :itemInfo="item"></newsbox>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
let listData = ref([{name: "張三", age: "18"}, {name: "李四", age: "19"}])
</script>
<style lang="scss" scoped>
.container{
padding: 10rpx 30rpx;
.row{
padding: 10rpx 0;
}
}
</style>子組件：
// 子組件中
<template>
<view class="box">
<text class="title">
{{pageTitle}}
</text>
<text class="name">
{{itemInfo.name}}
</text>
</view>
</template>
<script setup>
defineProps({
itemInfo: {
type: Object,
default: {}
},
pageTitle: {
type: String,
default: ""
}
})
</script>
<style lang="scss" scoped>
.box {
.title {
font-size: 32rpx;
}
.name {
font-size: 28rpx;
}
}
</style>二、兄弟傳值( $emit / $on )
借助中間代理， $emit 和 $on
1、說明
uni.$emit(eventName,OBJECT)
觸發(fā)全局的自定義事件，附加參數(shù)都會傳給監(jiān)聽器回調(diào)函數(shù)。
HarmonyOS Next 兼容性
代碼示例
uni.$emit('update',{msg:'頁面更新'})uni.$on(eventName,callback)
監(jiān)聽全局的自定義事件，事件由 uni.$emit 觸發(fā)，回調(diào)函數(shù)會接收事件觸發(fā)函數(shù)的傳入?yún)?shù)。
HarmonyOS Next 兼容性
代碼示例
uni.$on('update',function(data){
console.log('監(jiān)聽到事件來自 update ，攜帶參數(shù) msg 為：' + data.msg);
})uni.$off(eventName, callback)
移除全局自定義事件監(jiān)聽器。
HarmonyOS Next 兼容性
Tips
- 如果uni.$off沒有傳入?yún)?shù)，則移除App級別的所有事件監(jiān)聽器；
- 如果只提供了事件名（eventName），則移除該事件名對應(yīng)的所有監(jiān)聽器；
- 如果同時提供了事件與回調(diào)，則只移除這個事件回調(diào)的監(jiān)聽器；
- 提供的回調(diào)必須跟$on的回調(diào)為同一個才能移除這個回調(diào)的監(jiān)聽器；
代碼示例
$emit、$on、$off常用于跨頁面、跨組件通訊，這里為了方便演示放在同一個頁面
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">結(jié)束監(jiān)聽</button>
</view>
</template>
<script>
export default {
data() {
return {
val: 0
}
},
onLoad() {
setInterval(()=>{
uni.$emit('add', {
data: 2
})
},1000)
uni.$on('add', this.add)
},
methods: {
comunicationOff() {
uni.$off('add', this.add)
},
add(e) {
this.val += e.data
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.data {
text-align: center;
line-height: 40px;
margin-top: 40px;
}
button {
width: 200px;
margin: 20px 0;
}
</style>
注意事項
- 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ù)
- eventName 應(yīng)避免使用 uni 開頭，以免與 uni-app 內(nèi)置事件沖突
三、provide/inject
簡單講解：provide和inject叫依賴注入，是vue官方提供的API，它們可以實現(xiàn)多層組件傳遞數(shù)據(jù)，無論層級有多深，都可以通過這API實現(xiàn)。
假設(shè)這是太老爺組件： provide(‘名稱’, 傳遞的參數(shù))向后代組件提供數(shù)據(jù), 只要是后代都能接收
<template>
<div></div>
</template>
<script setup>
import { ref, provide } from 'vue'
const name = ref('天天鴨')
// 向后代組件提供數(shù)據(jù), 只要是后代都能接收
provide('name', name.value)
</script>最深層的孫組件： 無論層級多深，用 inject(接收什么參數(shù)) 進行接收即可
<template>
<div>{{ name }}</div>
</template>
<script setup>
import { inject } from 'vue'
// 接收頂層組件的通信
const name = inject('name')
</script>到此這篇關(guān)于uniapp+Vue3 組件之間的傳值方法示例詳解的文章就介紹到這了,更多相關(guān)uniapp Vue3 組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue.js項目中，經(jīng)常需要對數(shù)據(jù)實時更新——每隔xx秒需要刷新一次接口——即需要用到定時器相關(guān)原理。這篇文章主要介紹了vue項目每30秒刷新1次接口的實現(xiàn)方法,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關(guān)資料內(nèi)容，具有一定參考價值，需要的小伙伴可以參考一下2022-06-06
在Vue項目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價值，感興趣的可以了解一下2024-01-01
Vue的雙向數(shù)據(jù)綁定實現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
Mint UI 是 由餓了么前端團隊推出的 一個基于 Vue.js 的移動端組件庫，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細的代碼,有需要的小伙伴可以參考下2018-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端原生小球滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue.config.js配置報錯解決辦法(可能是與webpack混淆)
在Vue.js開發(fā)過程中,vue.config.js文件是用于配置項目的,特別是對于開發(fā)環(huán)境的設(shè)置,這篇文章主要給大家介紹了關(guān)于vue.config.js配置報錯解決的相關(guān)資料,可能是與webpack混淆,需要的朋友可以參考下2024-06-06
本篇文章主要介紹了vue-cli配置環(huán)境變量的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06
Prop的基本用法很簡單，只需要在子組件的Vue實例中定義該屬性并把值設(shè)為目標屬性的數(shù)組即可。這篇文章主要介紹了Vue中的Prop ,需要的朋友可以參考下2018-06-06