uniapp+Vue3 組件之間的傳值方法示例詳解
一、父子傳值（props / $emit 、ref / $refs）
1、props / $emit
父組件通過(guò) props 向子組件傳遞數(shù)據(jù)，子組件通過(guò) $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、說(shuō)明
uni.$emit(eventName,OBJECT)
觸發(fā)全局的自定義事件，附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)函數(shù)。
HarmonyOS Next 兼容性
代碼示例
uni.$emit('update',{msg:'頁(yè)面更新'})uni.$on(eventName,callback)
監(jiān)聽(tīng)全局的自定義事件，事件由 uni.$emit 觸發(fā)，回調(diào)函數(shù)會(huì)接收事件觸發(fā)函數(shù)的傳入?yún)?shù)。
HarmonyOS Next 兼容性
代碼示例
uni.$on('update',function(data){
console.log('監(jiān)聽(tīng)到事件來(lái)自 update ，攜帶參數(shù) msg 為：' + data.msg);
})uni.$off(eventName, callback)
移除全局自定義事件監(jiān)聽(tīng)器。
HarmonyOS Next 兼容性
Tips
- 如果uni.$off沒(méi)有傳入?yún)?shù)，則移除App級(jí)別的所有事件監(jiān)聽(tīng)器；
- 如果只提供了事件名（eventName），則移除該事件名對(duì)應(yīng)的所有監(jiān)聽(tīng)器；
- 如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)事件回調(diào)的監(jiān)聽(tīng)器；
- 提供的回調(diào)必須跟$on的回調(diào)為同一個(gè)才能移除這個(gè)回調(diào)的監(jiān)聽(tīng)器；
代碼示例
$emit、$on、$off常用于跨頁(yè)面、跨組件通訊，這里為了方便演示放在同一個(gè)頁(yè)面
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">結(jié)束監(jiān)聽(tīng)</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>
注意事項(xiàng)
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 觸發(fā)的事件都是 App 全局級(jí)別的，跨任意組件，頁(yè)面，nvue，vue 等
- 使用時(shí)，注意及時(shí)銷(xiāo)毀事件監(jiān)聽(tīng)，比如，頁(yè)面 onLoad 里邊 uni.$on 注冊(cè)監(jiān)聽(tīng)，onUnload 里邊 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 監(jiān)聽(tīng)
- 注意 uni.$on 定義完成后才能接收到 uni.$emit 傳遞的數(shù)據(jù)
- eventName 應(yīng)避免使用 uni 開(kāi)頭，以免與 uni-app 內(nèi)置事件沖突
三、provide/inject
簡(jiǎn)單講解：provide和inject叫依賴(lài)注入，是vue官方提供的API，它們可以實(shí)現(xiàn)多層組件傳遞數(shù)據(jù)，無(wú)論層級(jí)有多深，都可以通過(guò)這API實(shí)現(xiàn)。
假設(shè)這是太老爺組件： provide(‘名稱(chēng)’, 傳遞的參數(shù))向后代組件提供數(shù)據(jù), 只要是后代都能接收
<template>
<div></div>
</template>
<script setup>
import { ref, provide } from 'vue'
const name = ref('天天鴨')
// 向后代組件提供數(shù)據(jù), 只要是后代都能接收
provide('name', name.value)
</script>最深層的孫組件： 無(wú)論層級(jí)多深，用 inject(接收什么參數(shù)) 進(jìn)行接收即可
<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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
基于Vue3+Node.js實(shí)現(xiàn)實(shí)時(shí)可視化監(jiān)控系統(tǒng)
Vue使用Axios和elementui實(shí)現(xiàn)查詢(xún)分頁(yè)功能
在vue2?中使用?tailwindcss的方法?親測(cè)可用
在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法
Vue純前端使用exceljs導(dǎo)出excel文件的完整圖文教程
Vuex 單狀態(tài)庫(kù)與多模塊狀態(tài)庫(kù)詳解
Vue3 寫(xiě)法示例與規(guī)范詳細(xì)指南