Vue3 props的使用示例详解
更新时间：2023年10月08日 11:52:05 作者：一沓纸稿
这篇文章主要介绍了Vue3 props的使用详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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
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属性取得传递的数据
到此这篇关于Vue3 props的使用详解的文章就介绍到这了,更多相关Vue3 props使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
createPersistedState是Pinia插件,用于持久化存储状态数据,通过localStorage/sessionStorage实现页面刷新后数据保留,适用于登录信息、主题设置等场景,需在main.ts注册并配置store开启2025-07-07
同时Vue也支持让开发者,自己注册一些指令,这些指令被称为自定义指令,每个指令都有自己各自独立的功能,这篇文章主要介绍了Vue自定义指令简介和基本使用,需要的朋友可以参考2024-03-03
这篇文章主要介绍了Vue实现微信支付功能遇到的坑,本文是小编记录整理下拉的，以便日后所需，需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue使用ElementUI时导航栏默认展开功能的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
日常开发中我们可能碰到流程图的需求,实现流程图的库有很多,如果我们想要实现一个简便的流程图可以使用konva库来实现,下面我们就来看一下具体的实现过程,需要的朋友可以参考下2023-08-08
在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过,我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom,这篇文章主要给大家介绍了关于$nextTick的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了vue2实现数据请求显示loading图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了vue实现拖拽进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
径向条形图是一种用于可视化单一数据点及其与目标或理想值的关系的图表类型,它在显示进度、完成率或其他类似度量时非常有用,本文给大家介绍了使用Vue3和ApexCharts实现3D径向条形图,感兴趣的小伙伴可以参考阅读下2024-06-06
最新评论