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)聽器回調函數(shù)。

HarmonyOS Next 兼容性

代碼示例

uni.$emit('update',{msg:'頁面更新'})

uni.$on(eventName,callback)

監(jiān)聽全局的自定義事件，事件由 uni.$emit 觸發(fā)，回調函數(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），則移除該事件名對應的所有監(jiān)聽器；
如果同時提供了事件與回調，則只移除這個事件回調的監(jiān)聽器；
提供的回調必須跟$on的回調為同一個才能移除這個回調的監(jiān)聽器；

代碼示例

$emit、$on、$off常用于跨頁面、跨組件通訊，這里為了方便演示放在同一個頁面

<template>
		<view class="content">
			<view class="data">
				<text>{{val}}</text>
			</view>
			<button type="primary" @click="comunicationOff">結束監(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 應避免使用 uni 開頭，以免與 uni-app 內置事件沖突

三、provide/inject

簡單講解：provide和inject叫依賴注入，是vue官方提供的API，它們可以實現(xiàn)多層組件傳遞數(shù)據(jù)，無論層級有多深，都可以通過這API實現(xiàn)。
假設這是太老爺組件： 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>

到此這篇關于uniapp+Vue3 組件之間的傳值方法示例詳解的文章就介紹到這了,更多相關uniapp Vue3 組件傳值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue項目每30秒刷新1次接口的實現(xiàn)方法
在vue.js項目中，經(jīng)常需要對數(shù)據(jù)實時更新——每隔xx秒需要刷新一次接口——即需要用到定時器相關原理。這篇文章主要介紹了vue項目每30秒刷新1次接口的實現(xiàn)方法,需要的朋友可以參考下
2018-12-12
vue3中的父子組件通訊詳情
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關資料內容，具有一定參考價值，需要的小伙伴可以參考一下
2022-06-06
vue+ts大文件切片上傳的實現(xiàn)示例
在Vue項目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價值，感興趣的可以了解一下
2024-01-01
Vue的雙向數(shù)據(jù)綁定實現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-02-02
mint-ui在vue中的使用示例
Mint UI 是由餓了么前端團隊推出的一個基于 Vue.js 的移動端組件庫，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細的代碼,有需要的小伙伴可以參考下
2018-04-04
vue實現(xiàn)移動端原生小球滑塊
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端原生小球滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue.config.js配置報錯解決辦法(可能是與webpack混淆)
在Vue.js開發(fā)過程中,vue.config.js文件是用于配置項目的,特別是對于開發(fā)環(huán)境的設置,這篇文章主要給大家介紹了關于vue.config.js配置報錯解決的相關資料,可能是與webpack混淆,需要的朋友可以參考下
2024-06-06
vue-cli配置環(huán)境變量的方法
本篇文章主要介紹了vue-cli配置環(huán)境變量的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復用性,?讓我們能在不同的組件中都利用hooks函數(shù)
2022-06-06
深入淺析Vue中的Prop
Prop的基本用法很簡單，只需要在子組件的Vue實例中定義該屬性并把值設為目標屬性的數(shù)組即可。這篇文章主要介紹了Vue中的Prop ,需要的朋友可以參考下
2018-06-06