Props 声明
1、字符串数组声明props
<script setup lang="ts">
const props = defineProps(["cat"])
console.log(props.cat)
</script>2.对象实现props
<script setup lang="ts">
const props = defineProps({
cat:string
})
</script>
//可以在模板中直接使用cat变量
<template>
{{ cat }}
</template>你还可以使用类型标注,这是ts的特性。
<script setup lang="ts">
const props = defineProps<{
cat?:string
}>()
</script>
//或者使用接口
interface animal{
cat?:string
}
const props = defineProps<animal>()3、使用camelCase（小驼峰命名法），可以在模板中直接使用(如第一个例子)。看代码
defineProps({
getSex: String
})
<template>
{{getSex}}
</template>4、动态绑定props文章来源：https://www.toymoban.com/news/detail-604622.html
import {reactive} from "vue"
const data=reactive({
article:{
cat:"tom"
}
})
//下方传递这个cat
<span :animal='data.article.cat'></span>
//然后你就可以改变cat的属性值就可以实现动态传递数据了注意事项：defineprops在之前的Vue版本中需要引入，但是现在是不需要了。上面几个例子是建立在setup语法糖的基础上编写的即<script setup lang="ts">,如果你不是太熟悉setup语法糖，那么就需要在script标签中使用setup(){}中使用props属性取得传递的数据文章来源地址https://www.toymoban.com/news/detail-604622.html
到了这里，关于Vue3 props的使用详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
