关于Vue3的defineProps用法

最新推荐文章于 2024-09-18 16:24:49 发布
最新推荐文章于 2024-09-18 16:24:49 发布
阅读量2.7w 收藏 59
点赞数 23
分类专栏： vue 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fang_my/article/details/125398984
版权

之前只是单纯的会用，因为vue关于父子组件通讯差别有一点点大。

1.在父组件内传递变量的时候，需要加冒号:，否则你就只是单纯的传递了一个字符串而已。

image.png

2.在子组件里不需要引入defineProps就可调用该函数去接收父组件传来的属性。

image.png

我个人在这里给自己提醒⏰，可能我太迷糊了。

这里需要注意！！这是definePropsAPI是一个函数，它的返回值就是父亲传来的属性。

image.png

3.刚开始让我感到奇怪的是，我好像不用变量去接收，在template里也能正常使用。

那我还用变量接收干啥呢？这个API的返回值有毛线用啊？

image.png

image.png

也不用像React那样变量前面都得加一个props.才可以访问，也没有结构去拿。这么方便吗？

4.恍然大悟

原来在script标签里直接拿属性用是拿不到的…

image.png

image.png

这里变量名不一定非得是props，js可并没有规定不允许汉字作为变量名哦

image.png

下次聊聊defineEmits，主要react的一些思想还没完全转变到vue上，还需努力！

韩振方
关注
专栏目录
Vue组件：使用Prop实现父组件向子组件传递数据
pan_junbiao的博客
09-03 1182
由于组件实例的作用域是孤立的，因此子组件的模板无法直接应用父组件的数据。如果想要通过父组件向子组件传递数据，就需要定义 Prop。Prop 是父组件用来传递数据的一个自定义属性，这样的属性需要定义在组件选项对象的 props 选项中。通过props 选项中定义的属性可以将父组件的数据传递给子组件，而子组件需要显示地用props 选项来声明 Prop。
vue3 defineProps 函数
千里之行，始于足下！
09-07 1万+
vue3 defineProps： 在 vue2 中我们使用选项中的 props 来接受父组件传递过来的数据；那在 vue3 的 setup 中，我们使用 defineProps 来定义父组件传递过来的数据
Vue3.0组合式API：使用defineProps()实现父组件向子组件传递数据
最新发布
pan_junbiao的博客
09-18 1974
由于组件实例的作用域是孤立的，因此子组件的模板无法直接应用父组件的数据。如果想要通过父组件向子组件传递数据，就需要定义 Prop。Prop 是父组件用来传递数据的一个自定义属性，这样的属性需要定义在组件选项对象的 props 选项中。通过 props 选项中定义的属性可以将父组件的数据传递给子组件，而子组件需要显示地用 props 选项来声明 Prop。
学习Vue3的defineProps方法
常备不懈
01-28 7662
在Vue 3中，`defineProps`方法是一个重要的API，用于定义组件的Props属性。通过`defineProps`，我们能够更加灵活地声明和使用组件的属性，同时享受到类型检查和智能提示的好处。
vue 3 defineProps
chengtiandi的博客
04-07 9323
defineProps 1.js,使用 defineProps({ iconShow: { type: Boolean, default: true, }, data: { type: Object, require: true, }, }); ts使用 interface Props { iconShow?: boolean; data: Array<brData>; } // 添加默认值 const props = withDef
vue3 defineProps的使用及案例
weixin_47228574的博客
12-02 1万+
template>:a = "a":b="b"id="abc"// 定义属性const str = '吃饭、睡觉、敲代码'age: 18}const a = Symbol('好好学习')const b = Symbol('天天向上')// 定义方法console.log('传递给子组件的方法');}字符串: {{props.str}}
vue3中defineProps用法，结合ts接口interface的基本用法
葫芦娃y的博客
01-26 4235
vue3中defineProps用法，结合ts接口interface的基本用法
vue3defineprops用法
08-30
Vue 3 中的 `defineProps` 是一个用于定义...需要注意的是，`defineProps` 只能在 `setup` 函数中使用，并且仅适用于 Vue 3 Composition API。如果你正在使用 Vue 2，可以考虑使用 `props` 选项来定义组件的 props。
vue的defineProps用法
05-13
在 Vue 3 中，使用 defineProps 函数来定义组件的 props。defineProps 函数接收一个对象作为参数，对象的属性即为组件的 props，其属性值为对象，用于指定 props 的类型、默认值、是否必传等信息。 例如，在组件中...
vue3defineprops 泛型用法
09-02
需要注意的是，Vue 3中的泛型用法是可选的，如果不使用泛型，Vue会根据props的默认值或推断出的类型自动进行类型推导。但是在一些复杂的情况下，显式地定义props的类型可以提供更好的类型检查和开发体验。
vue3defineProps的用法
05-26
`defineProps` 是 Vue3.x 中新增的一个函数，用于定义组件的 props。它的使用方式如下： ```javascript import { defineComponent, defineProps } from 'vue'; const MyComponent = defineComponent({ props: ...
vue3 defineProps
08-15
在Vue3中，使用defineProps函数可以声明组件的props。引用中的代码示例展示了使用对象形式声明props的方法。通过在setup中使用defineProps函数并传入一个对象，可以定义props的类型和默认值。在模板中可以直接使用...
Vue3 defineProps使用
weixin_63681863的博客
10-03 975
【代码】Vue3 defineProps使用。
vue3的props和defineProps
pscool的博客
04-29 1万+
可以将组件中定义的属性值（响应式数据）传给子组件，当这些属性值发生变化时，子组件也会更新重新渲染。看上去跟vue2没什么区别，就是先引入组件，然后注册组件，然后就使用组件。
VUE3 defineProps
weixin_46744191的博客
04-16 1205
defineProps一个宏函数，用于显式声明组件接受的props,可以明确指定组件需要接收的props，并对传入的props进行类型检查和默认值设置。通过使用defineProps函数来定义props，可以更好地支持响应式，使得父组件对props的修改可以自动触发子组件的更新。在组件的setup函数中，defineProps可以接收一个对象作为参数，对象的键是props的名称，值是props的类型或者是一个包含类型、默认值等信息的对象。
vue3组件通信之defineProps
m0_63096015的博客
09-08 4109
注意，defineProps接受的参数只读，不可以更改。
vue3 definProps
一杯梅子酱的博客
06-12 528
在模板中，我们可以直接使用这些 props，就像使用组件内部的响应式数据一样。Vue 会自动处理 props 的响应性，并在父组件更新这些 props 时更新组件的状态。，你可以定义组件期望接收的属性（props），并为其指定类型、默认值等。这样，Vue 可以在运行时对传入的 props 进行验证，以确保它们符合预期的格式和类型。语法糖中使用的函数，用于声明组件接收的 props。这个语法糖简化了组件的编写，使得我们可以在更紧凑和直观的方式中定义和使用 props。的字符串类型的 props 和一个名为。
vue3 defineProps传值使用 ref 响应式失效
m0_60721514的博客
03-09 1573
子组件接收父组件的传参。 父组件： <template> <Son :data="data"/> </template> <script setup> import { ref } from "vue"; let data = ref('hello') setTimeout(() => { data.value = 'how are you doing' }, 2000) </script> 子组件： <template>
Vue3通透教程【十八】TS为组件的props标注类型
热门推荐
官方推荐
07-17 4万+
通过TS语法来编写组件的props方法
Vue3 中的 defineProps：优雅地实现子父组件传值
良月柒
04-23 8439
是 Vue 3 中新引入的函数，用于定义子组件的 props。与 Vue 2 中的props不同，更加明确和类型安全，它使用 TypeScript 或者 PropTypes 来明确指定 props 的类型和默认值，从而提供更好的开发体验和代码健壮性。是 Vue 3 中一个非常强大的特性，它提供了一种更加明确和类型安全的方式来定义子组件的 props。通过使用，我们可以让子父组件之间的数据传递更加清晰和可维护，同时也提高了代码的健壮性。希望本文能够帮助你更好地理解和使用 Vue 3 中的。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值