vue3父子组件之间的参数传递方式

在vue3中使用 <script setup> 的单文件组件中,页面向组件参数,组件通过defineProps来接收参数

举个栗子:

新建一个navbar的组件页面:

<template>


	<view>
		{{name}}
	</view>
	
	<view>
		{{content}}
	</view>
	


</template>

<script setup>
	defineProps(["name","content"])
</script>

在页面中调用组件并传参

<template>
	<view class="content">

		<navbar name="传值自定义组件" :content="data2" />
		
	</view>
</template>

<script setup>
	import {reactive, ref} from 'vue'
	import {navbar} from '@/components/navbar/navbar.vue'
	
	const data2 = ref("动态传值2")
	
</script>

name是通过固定值的方式传递 content是通过变量的方式传递。

在组件中给参数指定类型跟默认值:

<template>

	<view>
		{{name}}
	</view>
	
	<view>
		{{content}}
	</view>
	
</template>

<script setup>

	defineProps({
		name:String,
		content:{
			type:String,
			default:()=>{
				return "默认值2"
			}
		}
	})
	
</script>

在这个栗子中defineProps接收一个参数对象,并指定了属性name是一个字符串,通时也给content指定了类型跟默认值。

在主页面中调用

<template>
	<view class="content">

		<navbar name="传值自定义组件" :content="data2"/>
		
	</view>
</template>


<script setup>

	import {reactive, ref} from 'vue'

	import {navbar} from '@/components/navbar/navbar.vue'
	

	
	const data2 = ref("动态传值2")
	
</script>

如果我们不给content属性赋值那么就直接使用默认值。

------------------ 华丽分割线 ------------------

欢迎大家阅读我的创业笔记,如果你觉得这篇写得不错的话,可以关注我的公众号: 成长创业笔记 ;每周不见不散。

我是一名独立开发者。欢迎大家跟我交流软件开发、软件运营的一切事情,包括网站建设,小程序开发,app开发。

微信号:zstxinghui

更欢迎大家使用我的APP

1、松鼠天气,简洁的天气预报,节日日历工具。

2、陪诊小程序,家政小程序等行业小程序。

程序员小张
世界上只有一种真正的英雄主义,就是认清了生活的真相后还依然热爱生活。
随机文章
独立开发者的困局
2024-06-09 14:09:26
创业者怎样找到好的产品创意
2024-06-09 14:12:24
重新用阿里云搭建了一台测试服务器
2024-06-09 15:32:09
本地生活-家政小程序模板
2024-06-12 14:57:28
uniapp使用vue3实现tab切换效果
2024-07-27 14:36:05