v-on=“$listeners“，v-bind=“$attrs“

最新推荐文章于 2024-03-27 11:21:12 发布
最新推荐文章于 2024-03-27 11:21:12 发布
阅读量4.6k 收藏 21
点赞数 7
分类专栏： elementui 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44712405/article/details/125276280
版权

1、v-on="$listeners"

父组件A，子组件B，孙组件C。
C组件中emit事件后，在B中可以直接使用v-on="$listeners"接收，此时可以在A组件中的B上直接使用C中emit出来的事件。

2、v-bind="$attrs"

父组件A，子组件B，孙组件C。
A上设置值，若没在B上用props进行接收，则可以直接在B中的C设置v-bind="$attrs"，此时相当于把属性直接设置在C上。

岸芷汀兰§小慧
关注
  • 7
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue组件通信$attrs、$listeners实现原理解析
10-14
你可以通过 `v-bind="$attrs"` 来把这些属性传递给更深层的子组件，如 `grandson.vue`，这在处理多个属性时简化了代码。 `$listeners` 是另一个关键对象，它包含了父组件中不含 `.native` 修饰器的所有 `v-on` 事件...
Vue为什么要谨慎使用$attrs与$listeners
01-19
在 Vue 开发过程中，如遇到祖先组件需要传值到孙子组件时，需要在儿子组件接收 props ，然后再传递给孙子组件，通过使用 v-bind=$attrs 则会带来极大的便利，但同时也会有一些隐患在其中。 隐患 先来看一个例子： ...
初学Vue（全家桶）-第n天（vue2）：关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用
lalala_dxf的博客
02-12 5719
可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。: 将调用组件时的组件标签上绑定的的属性(class和style除外)向下传递。在(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。：通过，将底层级的信息往高层级传递。
深入了解vue自定义组件之$listeners
BDawn的专栏
10-07 1203
官方文档地址 $listeners是vue提供的一个对象，里面包含了所有作用在这个组件上的监听器。 比如你要自定义一个input组件，需要监听input获取焦点的事件 你可以这样做 自定义组件代码 <template> <div> <input type="text" v-on:focus="handleFocus" v-on:input="h...
vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听
MISS_zhang_0110的博客
01-13 2542
vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件监听一、层级关系1.top组件2.center组件3.bottom组件 vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦， vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。 v-bind="props":可以将父组件的所
vue中$listeners
forgiveForever的博客
05-24 4053
vue, $listeners, 组件传值,组件通信
vue组件v-on=“$listeners“与重写事件，执行两次
萝卜芹菜芽
07-16 3352
比如 element 组件 el-select，change 事件重写，返回更多的参数： <el-select @change="changeSelect" v-on="$listeners">xxx</el-select> method: { changeSelect(val) { this.$emit('change', val) } } 使用： <EccSelect @change="selectChange"></EccSelect>
Vue v2.4中新增的$attrs及$listeners属性使用教程
11-29
Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件...
详解关于element el-button使用$attrs的一个注意要点
01-21
之前需要对 el-button 做二次封装，所以就用到 vue 的 $attrs 和 $listeners 属性，这... v-bind=$attrs v-on=$listeners > <slot></slot> [removed] import { mapGetters } from 'vuex'; import env from '@/con
v-bind=“$attrs“ v-on=“$listeners“的理解及用法
最新发布
u013994400的博客
03-27 1899
1、这可以理解成穿透，多层组件监听2、用于多层级组件之间的通信3、高层级向底层级传值 v-bind=‘$attrs’4、低层级向高层级传值 v-on=“$listeners”
vue中使用v-on=“$listeners“ 将所有的事件监听器指向这个组件的某个特定的子元素
LUCKY_IT的博客
11-11 5244
vue中使用v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素 //这是父组件 <template> <div class="homeView"> <base-input v-on:focus="onFocus" v-model="baseInput.fullName" :label="label"></base-input> </div> </template> <script
vue中v-bind=“$attrs“和v-on=“$listeners“的含义
Martian的博客
03-12 2128
vue中v-bind="$attrs"和v-on="$listeners"的含义; 假定自定义了一个组件 ComponentB, props 接收了name, age两个参数, ComponentA在调用ComponentB时这么调用: <componentB :name="_name" :age="_age" :address="_address" :phone="_phone" @playBall="_playBall" @study="_study" > 而
vue框架的vm.$listeners、v-on=“$listeners“和vm.$attrs、v-bind=“$attrs“的使用
qq_37734787的博客
12-30 1242
vm.listeners包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="listeners包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners" 传入内部组件——在创建更高层次的组件时非常有用。 父组件 <子组件 @itemBack="handleCancel" @do-action=
vue 多组件传值技巧
Nooneandyou_的博客
11-24 1108
vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，子子子子子 这种多层组件向上触发事件很容易出BUG so v-on="$listeners" 可以解决每层都要emit事件和参数！ eg: <top> <parent> <center> <bottom> </bottom> </center> </parent> &
vue中使用v-bind=“$attrs“进行多层组件的传值&v-on=“$listener“监听事件（父级事件传递到内部组件）
是大林的林吖-博客
11-26 3734
使用v-bind="$attrs"进行多层组件的传值(即继承) 1、最外层组件（祖父）grandfather.vue <template> <div class="grandfather"> <father :title="title"/> </div> </template> <script> export default { data() { return{ title: 'hello worl
v-bind="$attrs" v-on="$listeners" 多层组件监听
体验技术
09-28 1万+
vue组件间的通信 多级组件通信，用vuex太重，props太麻烦。 vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。 &lt;top&gt; &lt;center&gt; &lt;bottom&gt; &lt...
Vue2.4中$attrs和$listeners的使用-学习笔记
热门推荐
songxiugongwang的博客
11-13 7万+
首先我们来看下面的一张图，图中表示一个多级组件嵌套的情形。 现在我们来讨论一种情况，A组件与C组件怎么通信，我们有多少种解决方案？ 我们使用VueX来进行数据管理，但是如果项目中多个组件共享状态比较少，项目比较小，并且全局状态比较少,那使用VueX来实现该功能，并没有发挥出VueX的威力。 使用B来做中转站，当A组件需要把信息传给C组件时，B接受A组件的信息，然后利用属性传给C组件，这是...
vue中v-bind=“$attrs“和v-on=“$listeners“的含义（记录）
u_ndefine_d的博客
02-21 335
vue中v-bind="$atts"和v-on="$listeners"的作用
v-bind=$attrs
07-27
v-bind=$attrs 是 Vue.js 中的一个特殊指令，用于将父组件的属性...如果需要在子组件中使用父组件的方法或监听事件，可以使用 v-on="$listeners" 来传递。 希望能帮到你！如果你对这方面还有其他问题，请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值