uniapp+Vue3 组件之间的传值方法示例详解

// 父组件中
<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>

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

uni.$on('update',function(data){
	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

<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>
 

<template>
  <div></div>
</template>
<script setup>
import { ref, provide } from 'vue'
const name = ref('天天鸭')
// 向后代组件提供数据, 只要是后代都能接收
provide('name', name.value)
</script>

<template>
  <div>{{ name }}</div>
</template>
<script setup>
import { inject } from 'vue'
// 接收顶层组件的通信
const name = inject('name')
</script>