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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue $attrs和$listeners的使用与区别
本文主要介绍了vue $attrs和$listeners的使用与区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
Element-UI Table组件上添加列拖拽效果实现方法
这篇文章主要为大家详细介绍了Element-UI Table组件上添加列拖拽效果的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
Vue路由传参及props解耦深入分析
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue-cli监听组件加载完成的方法
今天小编就为大家分享一篇vue-cli监听组件加载完成的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue.js项目打包上线的图文教程
下面小编就为大家分享一篇vue.js项目打包上线的图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11
用Vue Demi 构建同时兼容Vue2与Vue3组件库
这篇文章主要介绍了用Vue Demi 构建同时兼容Vue2与Vue3组件库，我们通过考虑其功能、工作原理以及如何开始使用它来了解 Vue Demi，下面我们一起进入文章学起来吧
2022-02-02
vue2组件实现懒加载浅析
本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力.
2017-03-03
vue修改swiper框架轮播图小圆点的样式不起作用的解决
这篇文章主要介绍了vue修改swiper框架轮播图小圆点的样式不起作用的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中使用js-doc的案例代码
这篇文章主要介绍了vue中使用js-doc的相关知识，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2024-01-01
vue3前端获取文件的绝对路径问题解决
这篇文章主要给大家介绍了关于vue3前端获取文件的绝对路径问题解决的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09