Vue3 props和attrs对比

最新推荐文章于 2025-03-16 10:23:46 发布

陪我去看海吧！

最新推荐文章于 2025-03-16 10:23:46 发布

阅读量2.7k

点赞数

分类专栏：学习笔记文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/hahaha918/article/details/108029026

版权

学习笔记专栏收录该内容

13 篇文章

订阅专栏

props V.S. attrs

props 要先声明才能取值，attrs不用先声明
props 不包含事件，attrs包含
props 支持 String 以外的类型，attrs只有 String 类型
props 没有声明的属性，会在 attrs 里，若在 props 内声明了该属性，那么 attrs 里就不会出现该属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陪我去看海吧！

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue3】组件通信之$attrs

又言又语

08-04

1377

本文介绍 Vue3 中如何使用$attrs实现父组件向子组件的子组件传数据，即向其孙子组件传数据。父组件向子组件传数据，实现方案有：propsv-model$ref默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件与子组件的子组件互传数据，即与孙子组件互传数据$attrsproviderinject任意组件间传数据mittPinia$attrs的作用其实是对props。

Vue3当中props与attrs

hsany330的专栏

02-16

1226

1. props的组件传值 props选项：用props进行组件传值的时候，必须先声明props中的属性在选项对象中，例： export default defineComponent({ props: { name: { type: String, required: true, }, age: { type: Number, required: true, }, } }) 在以上代码中，通过props选项声明

参与评论您还未登录，请先登录后发表或查看评论

Vue3中的$attrs全解析

最新发布

Jacklx888的博客

03-16

781

大家好呀～今天给大家带来一个超级实用的Vue3技巧：如何使用`$attrs`实现组件间属性传递！如果你在开发过程中需要快速将父组件的属性透传给子组件，那么`$attrs`绝对是你的最佳选择！话不多说，直接开整～

Vue3: 透传的说明 + Props和 Attrs的区别

EvanYYY1的博客

05-31

2271

Vue3 透传和porps的区别

vue3 组件传值之 props 与 attrs 的区别

很多时候犯错都是在不知情的情况下发生的

11-27

690

最近在学习 vue3，整理了一些学习笔记，如果有人看到，并发现我有写的不对的地方，欢迎指正~ 用过 vue 组件传值的小伙伴都知道 props 这个属性，而 $attrs 属性可以看做 props 的加强版，用来简化 vue 组件传值，那么这两个属性具体有什么区别呢？先说结论，区别如下： 1、props 要先声明才能取值，attrs 不用先声明 2、props 声明过的属性，attrs 里不会再出现 3、props 不包含事件，attrs 包含 4、props 支持 string 以外的类型，

vue3(自定义组件) prop 和 Attrs的使用方式(父子组件双向绑定)

的博客

07-05

1979

父子组件传值，props，attrs，emits，自定义组件

Vue vm.$attrs使用场景详解

10-15

`vm.$attrs` 是Vue实例的一个属性，它包含了父作用域中未被识别（即未声明为prop）的绑定属性，除了`class`和`style`。当一个组件没有声明任何prop时，`vm.$attrs`会包含所有父作用域的绑定属性（除了`class`和`...

Vue3 - $attrs 的几种用法（1个或多个根元素、Options API 和 Composition API）

weixin_39415598的博客

06-25

7315

本文简介点赞 + 关注 + 收藏 = 学会了使用 Vue 开发时，肯定会接触到组件的概念，无可避免的也会接触到组件通讯的概念。组件通讯的方式有很多种，我在《Vue3 过10种组件通讯方式》一文中粗略罗列了 Vue3 常用的组件通讯方法。在 Vue 2 中除了 $attrs 外，还有 $listeners ； Vue 3 把 $listeners 合并到 $attrs 里了。而本文的重点是讲解在 Vue 3 中如何使用 $attrs 。本文使用的 Vue 版本是 3.2.25

【Vue3】组件通信之props

又言又语

08-02

1186

本文介绍 Vue3 中如何使用props实现组件间通信，即组件间相互传数据。父组件向子组件传数据，实现方案有：propsv-model$ref默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件向子组件的子组件传数据，即向孙子组件传数据$attrsproviderinject任意组件间传数据mittPiniaVue3 中props子组件通过定义接收父组件的哪些数据；

Vue组件通信$attrs、$listeners实现原理解析

10-14

`$attrs` 是 Vue 中的一个对象，它包含了父组件中除 `class` 和 `style` 之外的所有未被声明为 prop 的属性绑定。这意味着，当你在子组件中没有明确声明某个 prop 时，父组件传递给子组件的属性将自动被收集到 `$...

Vue 中 props 和 attrs 概念与区别

csdn_girl的博客

08-04

4967

Vue 中的区别： Vue中的attrs和attrs和attrs和listener Vue-- attrs与attrs与attrs与listeners的详解在 vue 中，对于在父组件中传递的属性，若在子组件中使用@Prop声明了属性如@Prop name，则 name 属性只会在 this.props中出现，不会出现在this.props 中出现，不会出现在 this.props中出现，不会出现在this.attrs 中；若在子组件中没有使用@Prop声明属性，则属性会默认在 this.attrs中

vue3 props和attrs 区别

zw19940808的博客

02-24

698

attrs和props一样用作属性接收，但也有些区别 1、props 要先声明才能取值，attrs 不用先声明 2、props 声明过的属性，attrs 里不会再出现 3、props 不包含事件，attrs 包含 4、props 支持 string 以外的类型，attrs 只有 string 类型 ...

Vue3进阶＜5＞vue3中的$attrs的使用

qq_23918423的博客

11-14

6784

attrs$attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

Vue3中的常见组件通信之$attrs

m0_63165331的博客

06-09

2489

本文讲述vue3中间组件通信$attrs的用法。

Vue3中的透传Attributes / $attrs：简化组件开发的利器

有事儿私信。

07-19

5561

Vue3推出了一系列新功能和改进。使用下来后，其中一个很实用的新特性就是透传 Attributes（透传属性）。本文将介绍 Vue3中的透传 Attributes，并提结合代码示例来展示它在实际项目中的使用。

10.Vue3的必备技能点（九）: attrs

weixin_44121341的博客

02-06

439

Vue3的面试必备技能点 attrs 的使用

vue3组件通信（5）——$attrs

weixin_50845028的博客

09-12

1318

存在三个组件： father child grandchildfather组件定义的响应式数据，可以通过props通信方式进行传递，child组件可以通过defineprops进行接收，但是当child组件不接收时，father组件传递的数据将被保存到 $attrs 中：father组件向子组件传递数据以后，子组件不接收将全部保存到 $attrs 中，子组件通过向孙组件传递 $attrs ，从而达到father向g

vue3 attrs

07-28

在Vue 3中，`attrs`是一个特殊的属性，它用于接收父组件传递的所有非props属性。它是一个对象，包含了父组件传递给子组件的所有非props属性。在子组件中，你可以通过`attrs`属性访问这些非props属性。这样可以确保在子组件中能够接收到所有传递的属性，无论是否有对应的props定义。下面是一个简单的示例，展示了如何使用`attrs`属性： ```vue <template> <div> <p>Parent Component says: {{ message }}</p> <p>Non-props attribute: {{ attrs.nonPropAttribute }}</p> </div> </template> <script> export default { props: ['message'], setup(props, { attrs }) { console.log(attrs); // 输出所有非props属性 return { attrs }; } }; </script> ``` 在上面的例子中，父组件可以通过非props属性向子组件传递数据，并在子组件中通过`attrs`访问到这些属性。这在需要动态传递一些额外的属性时非常有用。