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