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