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属性赋值那么就直接使用默认值。

开发者前沿--vue3父子组件之间的参数传递方式