$listeners和$attrs的使用

最新推荐文章于 2022-10-11 11:24:27 发布
最新推荐文章于 2022-10-11 11:24:27 发布
阅读量138 收藏
点赞数
分类专栏： Vue 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/not_a_id/article/details/116099805
版权

Vue中$listeners和$attrs的使用其实就是一种简化的替代数据和事件跨级传递的方式，假如有父组件，子组件，孙组件三个组件嵌套，在孙组件上$emit一个事件，在子组件中v-on:$linsteners，这样父组件就可以监听到孙组件上的事件，实际上v-on:$linsteners就是简化了事件子组件中继到父组件的过程，同理$attrs简化了数据由父组件向孙组件传递的过程

not_a_id
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
$attrs 和 $linstener
Zhou_xiaoqian的博客
01-08 654
首先，官方解释 2.4.0 新增 $attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。 $linsteners：包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on="$lis...
vue2的$listeners的使用
我的博客简介
07-29 3701
listeners用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与$attrs不同，不存在半路被拦截的情况）父亲通过点击div触发click事件，同时向孙子（GrandSon）传递$listeners。爷爷（GrandFather）给父亲（Father）绑定一个click事件。写法如下（注v-on不能用简写@，虽然不报错，但是也不生效）...
vue基础教学（17）
Taojia9958的博客
06-28 331
this.$nextTick 应用 组件间6种通讯
深入了解vue自定义组件之$listeners
BDawn的专栏
10-07 1199
官方文档地址 $listeners是vue提供的一个对象，里面包含了所有作用在这个组件上的监听器。 比如你要自定义一个input组件，需要监听input获取焦点的事件 你可以这样做 自定义组件代码 <template> <div> <input type="text" v-on:focus="handleFocus" v-on:input="h...
Vue中v-on=“$listeners“的使用方法
weixin_44594219的博客
10-11 1万+
Vue中v-on="$listeners"的使用方法
Vue为什么要谨慎使用$attrs与$listeners
10-14
主要介绍了Vue为什么要谨慎使用$attrs与$listeners，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue组件通信$attrs、$listeners实现原理解析
10-14
使用 `$attrs` 和 `$listeners` 的典型场景包括： 1. **组件传值**：当祖父组件向父亲组件传递数据，而这些数据需要进一步传递给孙子组件，并且孙子组件需要调用祖父组件的方法时，可以利用 `$attrs` 获取未声明的...
Vue v2.4中新增的$attrs及$listeners属性使用教程
11-29
Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件...
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
10-15
主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中$listeners
forgiveForever的博客
05-24 4050
vue, $listeners, 组件传值,组件通信
VUE查漏补缺(一): $listener跟$attrs的使用
m0_38005587的博客
03-15 1万+
vue中提供了很多很好用的语法糖给我们使用,其中获取原生事件.native就是一种很好的方式: 但是,正如VUE官方文档所说的: 不过在你尝试监听一个类似&lt;input&gt;的非常特定的元素时，这并不是个好主意。比如上述&lt;base-input&gt;组件可能做了如下重构，所以根元素实际上是一个&lt;label&gt;元素 &lt;label&gt; {{ la...
Vue 中 $listeners 的使用方法
ss15363380815的博客
01-24 747
$listeners 的官方介绍： 包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。 下面代码中包含一个子组件和一个父组件，子组件需要调用父组件中的方法，可以通过$listeners.方法名形式调用。方法名必须在父组件中被定义，因为子组件是在父组件的模块中来使用的，通过$listeners 可以很好的用在多次传递方法 <div id="app"> ...
Vue—$attrs、$listener、$props的区别和联系
雷雨天的雷胖子
04-28 852
$attrs 父作用域中当前组件绑定的属性，不包括在当前组件里面用props接收的属性。 $listeners 父作用域中当前组件监听的事件。 $props 当前组件通过props接收的属性。 备注：$attrs + $props = 父作用域中使用当前组件时定义的所有属性。 v-bind="$attrs"、v-bind="$props"、v-on="$listener...
跨组件通讯：$attrs和$listener的用法？
lqlq54321的博客
05-27 1036
跨组件通讯： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 用挺俗一点的话来讲呢，假如B组件是父亲，那么A组件就是爷爷，c,d组件就是孙子，那么爷爷和孙子之间是如何进行传值的呢？（只是一个比较形象得说法，利于理解） $attrs：主要用于接收没有通过props传递的属性，可以通过 $attrs将爷爷组件的值传递给中间组件（B组件）的子组件（C组件） A.vue=> <template> <
vue中的$attrs和$listener以及$props简介
很多时候犯错都是在不知情的情况下发生的
08-15 803
Vue中的$attrs和$listener 大家在组件开发中肯定遇到过父组件需要向子组件传递数据和事件的问题，以往我们是这样解决的： 父组件代码： 1 <template> 2 <div id="father"> 3 <child :tempdata="temp" @fatherFn="tempFn"><child> 4 </div> 5 </template> 6 <scr
【TestNG】TestNG使用教程详解
热门推荐
df0128的专栏
10-23 11万+
一、TestNG介绍 TestNG是Java中的一个测试框架， 类似于JUnit 和NUnit, 功能都差不多， 只是功能更加强大，使用也更方便。 二、TestNG安装（基于eclipse+maven） 工程的pom.xml中需要添加如下内容： &amp;amp;amp;amp;amp;lt;dependency&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;groupId&amp;amp;amp;amp;am
Vue $listener 和 .native 修饰符 示例详解
Kofe_Chen的博客
07-20 470
vm.$listener 包含了父组件中（除了 .native 修饰器以外的）事件监听器。 当内部组件不具备外部绑定的一些 DOM 事件，而外部组件具备相应的 DOM 事件时，在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。 示例如下： // 父组件作用域中 // js import TodoTextInput from '@/components/TodoTextInput.vue' // html <TodoTextInput
Vue—组件实例之$listener
雷雨天的雷胖子
04-27 8536
目录 一、概述 二、示例详解 一、概述 $listener属性包含了父作用域中所有的（不含.native修饰器的）v-on事件监听器，它可以通过如下代码将包含的事件监听器传入内部组件，在创建更高层次的组件时非常有用。$listener属性诞生的目的是为了在自定义组件中使用原生事件。 <child v-on="$listeners"></child > 二、示例...
Vue中 $attrs、$listeners 详解及使用
明天也要努力的博客
04-23 4万+
1. 前言 多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。 Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props 特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和 事件总线 的情况下变得简洁，业务清晰。 首先分析以下应用场景 A 组件与 B 组件
$attrs和$listeners如何使用
最新发布
05-25
在Vue.js中，$attrs和$listeners是两个常用的属性，它们的作用如下： 1. $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。可以在组件中使用 $attrs 来访问这些特性，从而实现组件的透传特性。 2. $listeners：包含了父作用域中 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件，从而实现组件的透传事件。 举个例子，假设有一个父组件 Parent.vue 和一个子组件 Child.vue，Parent.vue模板代码如下： ```html <template> <Child :name="name" v-bind="$attrs" v-on="$listeners" /> </template> <script> import Child from './Child.vue' export default { name: 'Parent', components: { Child }, props: { name: String } } </script> ``` 在这个例子中，我们通过 v-bind="$attrs" 将父组件中的所有非 props 特性（例如 id、class、style等）透传给子组件。同时，通过 v-on="$listeners" 将父组件中除了 .native 修饰器以外的所有事件监听器透传给子组件，这样就可以在子组件中使用这些事件了。 在子组件 Child.vue 中，我们可以这样使用 $attrs 和 $listeners： ```html <template> <div> <input :value="value" @input="$emit('input', $event.target.value)" v-bind="$attrs" v-on="$listeners" /> </div> </template> <script> export default { name: 'Child', props: { value: String } } </script> ``` 在这个例子中，我们通过 v-bind="$attrs" 将父组件中的非 props 特性（例如 id、class、style等）绑定到子组件的 input 元素上，通过 v-on="$listeners" 将父组件中的事件监听器绑定到子组件的 input 元素上，这样就实现了组件的透传特性和透传事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值