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

• ● 松鼠驾考：驾考刷题APP，新版的驾考题目内容持续更新。
• ● 松鼠天气：简洁的天气预报，日历工具
• ● 加我微信：zstxinghui

成长创业笔记