uniapp+Vue3 组件之间的传值方法示例详解
作者：我是陈大大
文章主要介绍了父子传值、兄弟传值和provide/inject三种在Vue中进行组件间通信的方法,感兴趣的朋友跟随小编一起看看吧
一、父子传值（props / $emit 、ref / $refs）
1、props / $emit
父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。
父组件：
// 父组件中
<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)
触发全局的自定义事件，附加参数都会传给监听器回调函数。
HarmonyOS Next 兼容性
代码示例
uni.$emit('update',{msg:'页面更新'})uni.$on(eventName,callback)
监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
HarmonyOS Next 兼容性
代码示例
uni.$on('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})uni.$off(eventName, callback)
移除全局自定义事件监听器。
HarmonyOS Next 兼容性
Tips
- 如果uni.$off没有传入参数，则移除App级别的所有事件监听器；
- 如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
- 如果同时提供了事件与回调，则只移除这个事件回调的监听器；
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
代码示例
$emit、$on、$off常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面
<template>
<view class="content">
<view class="data">
<text>{{val}}</text>
</view>
<button type="primary" @click="comunicationOff">结束监听</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 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
- 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听
- 注意 uni.$on 定义完成后才能接收到 uni.$emit 传递的数据
- eventName 应避免使用 uni 开头，以免与 uni-app 内置事件冲突
三、provide/inject
简单讲解：provide和inject叫依赖注入，是vue官方提供的API，它们可以实现多层组件传递数据，无论层级有多深，都可以通过这API实现。
假设这是太老爷组件： provide(‘名称’, 传递的参数)向后代组件提供数据, 只要是后代都能接收
<template>
<div></div>
</template>
<script setup>
import { ref, provide } from 'vue'
const name = ref('天天鸭')
// 向后代组件提供数据, 只要是后代都能接收
provide('name', name.value)
</script>最深层的孙组件： 无论层级多深，用 inject(接收什么参数) 进行接收即可
<template>
<div>{{ name }}</div>
</template>
<script setup>
import { inject } from 'vue'
// 接收顶层组件的通信
const name = inject('name')
</script>到此这篇关于uniapp+Vue3 组件之间的传值方法示例详解的文章就介绍到这了,更多相关uniapp Vue3 组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！