Vue3：组件间通信-$attrs的使用

于 2024-04-03 16:40:29 发布
阅读量202 收藏
点赞数 2
分类专栏： 前端 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brave_heart4pzj/article/details/137350336
版权

一、情景说明

我们之前学习了通过props实现，父给子传数据
那么，如果，父组件给子组件传递多个数据，但是，子组件只用props声明了一个数据

其他数据去哪里了呢？

二、案例

1、父组件

<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>

2、子组件

defineProps(['a','updateA'])

3、看浏览器控制台效果
在这里插入图片描述
4、取出attrs中的数据

<h4>$attrs：{{ $attrs }}</h4>
生产队队长
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
爷孙组件直接消息传递-$attrs
12-25
爷孙组件直接消息传递-$attrs
vue2跨组件传值、透明传输（$attrs 和 $listeners ）
qq_36657291的博客
07-11 423
当在 Vue.js 组件中使用 $attrs 和 $listeners 时，它们提供了一种方便的方式来处理传递给组件的属性和事件监听器。1.$attrs 是一个对象，包含了父组件传递给当前组件但未被当前组件声明的 props。这对于实现“透明传输”非常有用。2.$listeners 也是一个对象。它包含了父组件传递给当前组件的所有事件监听器。往下传值：$attrs。
Vue3组件间的通信方式
m0_64642443的博客
07-18 4448
目录 1.props父向子组件通信2.自定义事件 子向父组件通信3.全局事件总线4.v-model组件通信（父子组件数据同步）绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parentref获取子组件实例对象 $parent获取父组件实例对象 7.provide-inject 可以实现隔辈传输8.Pinia选择式API：组合式API：父组件：props用于父组件向子组件传递数据，子组件用defineProps接收父组件传递来的参数在父组件中我们可以在使用子组件时，对其传递p
Vue组件通信-$attrs与$listeners概念与应用
weixin_71403100的博客
04-25 1893
一、$attrs与$listeners是什么$attrs与$listeners都是是属于组件实例自身的一个属性：包含了父作用域中不包含在props中的属性，这些属性可以在组件内部使用，也可以通过v-bind="$attrs"传递给子组件使用。：包含了父作用域中的(不含.sync修饰器的)v-on事件监听器，这些监听器可以在组件内部使用，也可以通过v-on="$listeners"传递给子组件使用。
Vue--$attrs, $listeners--使用/教程/实例
IT利刃出鞘的博客
01-08 2900
​ 说明 本文用示例介绍Vue的$attrs和$listener的用法 官网 API — Vue.js $attrs 和 $listeners介绍 Vue2.4 中，引入了attrs 和 listeners ， 新增了 inheritAttrs 选项。 $attrs：包含了父作用域中没有被 prop 接收的所有属性（不包含class 和 style 属性）。可以通过 v-bind="$attrs" 直接将这些属性传入内部组件。 $
Vue组件通信$attrs、$listeners实现原理解析
10-14
主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
12.（vue3.x+vite）组件间通信方式之$attrs与$listeners.rar
09-19
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue v2.4中新增的$attrs及$listeners属性使用教程
11-29
Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件...
前后端分离后，遇到的坑
Brave_heart4pzj的博客
07-19 4899
前后端分离 前端用ajax发起请求。 后端采用springmvc架构。 遇到的第一个常见问题，跨域请求。 所以，要在controller类上面加上一个注解 @CrossOrigin 以往不分离的时候，是不需要这个注解的，我们常规的springmvc的controller注解是： @Controller @RequestMapping("/Pay") 所以，注意了，前后端分离，一定要在control...
CSDN网页上获取关注的人列表的js代码
Brave_heart4pzj的博客
12-30 3569
var names=""; $(".watch_list .item_cont .nick").each(function(){ names+=$(this).text()+","; }); alert(names);
CSDN博客常用原生HTML标签汇总（帮助你写出优美的博客文章）
Brave_heart4pzj的博客
12-25 3412
场景一：给文字添加块背景，一般在文章总结处使用 标签： <blockquote>总结：今天天气不错</blockquote> 效果： 总结：今天天气不错 场景二：字体、大小、颜色处理 标签： <font size="3" color="red">This is some text!</font> <font size="2" color="...
Vue3：ref和reactive实现响应式数据
最新发布
Brave_heart4pzj的博客
03-08 1557
Vue
Vue2：通过props给组件传数据
Brave_heart4pzj的博客
01-08 1311
Vue
Vue2：通过代理服务器解决跨域问题
Brave_heart4pzj的博客
01-26 929
Vue
Vue：使用IDEA开发Vue的相关配置
Brave_heart4pzj的博客
01-01 863
vue
Vue2：通过ref获取DOM元素
Brave_heart4pzj的博客
01-08 849
Vue
Vue：多组件样式冲突问题解决
Brave_heart4pzj的博客
01-10 809
Vue
Vue2：实用的$nextTick方法
Brave_heart4pzj的博客
01-22 782
Vue
vue3常用的组件间通信方式有哪些
06-01
Vue3 常用的组件间通信方式有以下几种： 1. props 和 emit：父组件通过 props 向子组件传递数据，子组件通过 emit 触发事件通知父组件。这是最常用的一种方式。 2. provide 和 inject：父组件通过 provide 向子孙组件注入数据，子孙组件通过 inject 获取数据。这种方式可以实现跨层级的组件通信。 3. $attrs 和 $listeners：$attrs 包含了父组件传递给子组件但子组件没有显式声明的 props，$listeners 包含了父组件在子组件上注册的事件监听器，这两个属性可以在子组件内部传递给其他子组件。 4. Vuex：Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，可以实现多个组件之间共享状态和数据。 5. EventBus：EventBus 是一个事件总线，可以在任何组件中触发和监听自定义事件，实现组件之间的通信。 6. ref 和 reactive：ref 和 reactive 是 Vue3 中响应式数据的实现方式，可以通过 ref 和 reactive 创建响应式数据，并在组件中直接使用。这种方式可以实现组件内部的通信。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值