$attrs $listeners 简单理解

最新推荐文章于 2023-10-09 13:57:17 发布
最新推荐文章于 2023-10-09 13:57:17 发布
阅读量763 收藏
点赞数
文章标签： $attrs $listeners
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/colorfulSnow/article/details/93877620
版权

$attrs l i s t e n e r s 1 、 listeners 1、 listeners1、attrs 一个对象 新增属性 用于接收父组件传递来的数据，除开props里接收的以及class style

2、 l i s t e n e r s 对 象 新 增 属 性 包 含 着 所 有 作 用 于 这 个 组 件 的 监 听 事 件 ， 使 用 v − o n = " listeners 对象 新增属性 包含着所有作用于这个组件的监听事件，使用v-on=" listeners对象新增属性包含着所有作用于这个组件的监听事件，使用v−on="listeners"可以将里面的监听事件指向这个组件特定的子组件
在这里插入图片描述

爱吃兔子的萝北
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中的$attrs和$listeners
weixin_50964668的博客
05-05 429
Vue中的 $attrs 和 $listeners 最近在研究 Vue 的组件库，之前也用过 $attrs 和 $listeners，官方文档描述的不太详细，也没有太好的例子，就没有深入的研究过这两个属性。最近生病在家，正好有时间好好研究一下 Vue 的高阶用法，写了几个 demo，下面我们来看看这两个属性到底有什么奥秘。 $attrs 我们先来看看官方文档的 api 描述是怎样描述 $attrs 的 乍一看可能有点懵，下面我们结合下面的例子来看看 $attrs 的作用 普通的 props 传值 先来看看
vue $attrs、$listeners、inheritAttrs的理解
前端李小白的博客
07-30 690
$attrs 包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。 $listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常
$attrs 和 $listeners
qq_41709082的博客
10-12 5612
$attrs 和 $listeners 一、概念： $attrs: 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等) ps: 官网原话 其实就可以简单理解为：除了组件内props声名了的所有给组件传的值（class,style除外） 这个属性有什么作用呢？ 当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁。案例如下： // parent.vue <m-child :data-s
$attrs 和 $listeners (vue2&&vue3)
最新发布
每天都要努力学习哦~~
10-09 6461
listeners。
$attrs和$listeners
風缘的博客
09-05 9496
$attrs与$listeners的主要应用是实现多层嵌套传递。 组件A与组件B通信一般都会使用组件B中转，即A传递给B，B再给C，但是如果A到C组件之间嵌套的组件过多，需要传递的事件和属性较多，会导致代码繁琐，代码维护困难。在vue2.4中，为了解决该需求，引入了$attrs和$listeners，新增了inheritAttrs选项。 $attrs的使用 官方定义： 包含了父作用域中不作为pr...
12.（vue3.x+vite）组件间通信方式之$attrs与$listeners.rar
09-19
在这个“12.（vue3.x+vite）组件间通信方式之$attrs与$listeners.rar”压缩包中，我们重点关注的是在 Vue 3.x 中组件间的通信方式，特别是 $attrs 和 $listeners 这两个属性。 首先，理解组件间通信是学习 Vue.js ...
vue 2.6 以及vue 3.0的$attrs, $listeners, inheritAttrs
炯炯灯的博客
06-15 1957
最近做新项目，写基础组件用到了vue2.6的新特性$attrs, $listeners, inheritAttrs。其实也不算新了，只是自己以前没用过，突然觉得自己更新知识的速度还是有点慢的。看来没事还是得多逛逛国外前端大佬的博客。 这仨货的基础知识文档都有，这种东西还是在项目里说明比较易懂而且实用，所以我直接说下基础组件的编写过程好了，以AutoCompleteInput组件为例。 首先要清...
详解关于element el-button使用$attrs的一个注意要点
10-17
作者在分享二次封装el-button组件时，采用了$attrs和$listeners属性来实现属性的传递和事件监听。不过在这个过程中，遇到了一个特定问题：点击封装后的按钮会意外地触发页面刷新，而不是预期的按钮行为。 在文章中...
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
08-27
主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下
vue组件通信 $attrs/$listeners
seimeii的博客
07-29 320
vue组件间通信六种方式（完整版）
Vue--$attrs, $listeners--使用/教程/实例
IT利刃出鞘的博客
01-08 3110
​ 说明 本文用示例介绍Vue的$attrs和$listener的用法 官网 API — Vue.js $attrs 和 $listeners介绍 Vue2.4 中，引入了attrs 和 listeners ， 新增了 inheritAttrs 选项。 $attrs：包含了父作用域中没有被 prop 接收的所有属性（不包含class 和 style 属性）。可以通过 v-bind="$attrs" 直接将这些属性传入内部组件。 $
Vue v2.4中新增的$attrs及$listeners属性使用教程
xueyue616的博客
04-02 756
这篇文章主要给大家介绍了关于Vue v2.4中新增的$attrs及$listeners属性的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。 目录 前言 A 组件与 B 组件之间的通信： （父子组件） A 组件与 C 组件之间的通信： （跨多级的组件嵌套关系） 示例代码 A组件（App.vue） B组件...
Vue-- $attrs与$listeners的详解
JEECG官方博客
12-17 1500
vm.$attrs 2.4.0新增 类型 { [key: string]: string } 只读 详细 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的...
$attr $listener
newway007的博客
12-29 581
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
$attrs、$listeners和inheritAttrs详解
qq_40637612的博客
01-08 1320
在写项目过程中发现很多组件之间需要通信，父子组件之间还好，但有时就需要跨多级传值，传很多值就很繁琐，代码也很冗余。 在vue文档中我发现这样一个属性，可以将要传递的值放到$attrs中，这样只需要在孙辈组件中取就ok，中间过程中就可以减少很多重复代码。而子辈或者孙辈中emit的事件可以在中间组件中通过$listeners属性避免多于代码。 parents.vue &lt;templat...
Vue2.x跨级/嵌套组件通信$attrs，$listeners，inheritAttrs的使用
阿里巴啦的博客
05-08 1465
一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C/D 都是父子关系，C 和 D 是兄弟关系，A 和 C/D 是隔代关系。 vue组件之间的通信6种为： 父子通信：props/$emit 兄弟通信：eventHub（$emit / $on） vue 的状态管理器，存储的数据是响应式：vuex 多级组件嵌套：$attrs / $listeners 注入依赖：provide/inject 组件访问：$parent / $children与 ref 假如我们想让A和C进行通信，有些小伙伴就
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值