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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇关于Vuex中的State使用介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
本文介绍了双Token机制在Vue3应用中的实现,包括登录/注册、请求拦截、响应拦截、Token存储、退出登录等流程,重点是Token的刷新逻辑和安全性2025-03-03
这篇文章主要为大家详细介绍了Vue组件开发之异步组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了Vue enter回车导致页面刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下2019-03-03
vue中axios防止多次触发终止多次请求的示例代码（防抖）
这篇文章主要介绍了vue中axios防止多次触发终止多次请求的实现方法（防抖）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了Vue.js结合bootstrap前端实现分页和排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
vue3 onMounted异步函数同步请求async/await实现
这篇文章主要为大家介绍了vue3 onMounted初始化数据异步函数/同步请求async/await实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家介绍了Vue应用qs插件实现参数格式化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
Element UI的el-upload上传组件相信各位小伙伴都已经非常熟悉，最近接了一个新需求，要求在el-upload组件基础上实现分片上传功能，即小于等于5M文件正常上传，大于5M文件切成5M每片上传,那么这个功能怎么实现呢?一起看看吧2022-09-09
最新评论