在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、陪诊小程序,家政小程序等行业小程序。