uniapp vue3父子间传值

最新推荐文章于 2024-07-09 21:41:07 发布

佩淇呢

最新推荐文章于 2024-07-09 21:41:07 发布

阅读量1k

点赞数 5

分类专栏： javascript uniapp 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/m0_67880202/article/details/135292314

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

uniapp

3 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3.0中如何使用`setup`语法糖实现父子组件间的通信，包括父组件通过`defineProps`向子组件传入数据以及子组件通过`defineEmits`触发事件并传递数据给父组件的应用实例。

摘要由CSDN通过智能技术生成

使用的是setup语法糖。

1.父传子-defineProps

父组件示例代码：

<template>
	<view class="content">
		<navbar name="我是navbar" :content="data"></navbar>
	</view>
</template>

<script setup>
	import { ref,reactive,computed } from 'vue'
	const data = ref('动态数据')
</script>

子组件示例代码：

<template>
	<view>
		navbar组件
		<view>组件name属性：{{name}}</view>
		<view>组件content属性：{{content}}</view>
	</view>
</template>

<script setup>
	import { ref,reactive,computed,defineProps,defineEmits } from 'vue'
	defineProps({
		name:String,
		content:{
			type:String,
			default:()=>{
				return '默认值'
			}
		}
	})
</script>

在子组件中通过defineProps来接收父组件传过来的数据，name为静态数据，content为动态数据。

2.子传父-defineEmits

<template>
	<view>
		navbar组件
		<view>组件name属性：{{name}}</view>
		<view>组件content属性：{{content}}</view>
		<button @click="handleChange">修改content</button>
	</view>
</template>

<script setup>
	import { ref,reactive,computed,defineProps,defineEmits } from 'vue'
	defineProps({
		name:String,
		content:{
			type:String,
			default:()=>{
				return '默认值'
			}
		}
	})
	const emit = defineEmits(['changeData'])
	const handleChange = ()=>{
		emit('changeData','修改后的数据')
	}
</script>

在子组件中通过defineEmits定义了一个事件"changeData"，用于在handleChange函数中触发。handleChange函数触发后将数据传递给了父组件。在父组件中通过@changeData来接收子组件传递的数据。

父组件代码示例：

<template>
	<view class="content">
		<navbar name="我是navbar" :content="data" @changeData="changeData"></navbar>
	</view>
</template>

<script setup>
	import { ref,reactive,computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const data = ref('动态数据')
	const changeData = (val)=>{
		data.value = val
	}
</script>