vue $attrs $listeners,vue自己封装树形结构组件
vue的通信方式有很多种，比如props/emit、vuex、eventbus、provide/inject等。还有一种通信方法，那就是$attrs和$listeners。下面这篇文章主要介绍了Vue包组件的$attrs和$listeners使用的相关信息，有需要的可以参考一下。
目录
前言$attrs示例：$listeners(官网解释)使用场景总结
前言
多级组件嵌套需要传递数据时，常用的方法是vuex。但是仅仅传输数据而不进行中间处理并使用vuex处理就有些大材小用了。所以有两个属性，$attrs和$listeners，它们通常与inheritAttrs一起使用。
$attrs
如果没有收到属性，从父组件传递到自定义子组件的属性将被自动设置为子组件内最外面的标签。如果是类和样式，最外层标签的类和样式会合并。
如果子组件不想继承父组件传入的非属性，它可以使用inheritAttrs禁用继承，然后通过v-bind=$attrs 将外部传递的非属性设置为所需的标签，但这不会更改类和样式。
InheritAttrs财产官方网站链接
2.4.0 新增
类型：布尔型
默认值：真
详细：
默认情况下，不被识别为props的父范围的属性绑定将被“回滚”,并作为普通的HTML属性应用于子组件的根元素。当编写包装目标元素或另一个组件的组件时，这可能并不总是符合预期的行为。通过将inheritAttrs设置为false，这些默认行为将被移除。这些属性可以通过实例属性$attrs(也是2.4中的新特性)生效，并且可以通过v-bind显式绑定到非根元素。
注意：该选项不影响类和样式绑定。
例子：
父组件
模板
我的输入
需要
Placeholder=请输入内容
type=text
主题-黑暗
/
/模板
脚本
从“”导入MyInput。/孩子
导出默认值{
姓名：家长，
组件：{
我的输入
}
}
/脚本
组件
模板
差异
投入
v-bind=$attrs
窗体-控件
/
/div
/模板
脚本
导出默认值{
名称：我的输入，
inheritAttrs: false
}
/脚本
子组件不接受父组件传递的值，也不绑定，但是它有属性v-bind=$attrs ，它会自动接受并绑定。
inheritAttrs: false
inheritAttrs: true
$listeners (官网解释)
Listeners:包含父范围中的v-on事件侦听器(没有。原生修饰符)。它可以通过v-on=$listeners 传递到内部组件3354中。这在创建更高级别的组件时非常有用。
第一个代码：这里只有两个本地事件，focue和input。
//父组件
模板
我的输入
需要
占位符
主题-黑暗
@focue=onFocus
@input=onInput
/我的输入
/模板
脚本
从“”导入MyInput。/孩子
导出默认值{
组件：{
我的输入
},
方法：{
焦点(e) {
console.log(e.target.value)
},
onInput (e)
console.log(e.target.value)
}
}
}
/脚本
//子组件
模板
差异
投入
type=text
v-bind=$attrs
class=窗体-控件
@focus=$emit(focus ，$event)
@input=$emit(input ，$event)
/
/div
/模板
脚本
导出默认值{
名称：我的输入，
inheritAttrs: false
}
/脚本
绑定原生事件很麻烦，每个原生事件都需要绑定，但是使用v-on=$listeners 会省去很多麻烦。
投入
type=text
v-bind=$attrs
窗体-控件
v-on=$listeners
- @focus=$emit(focus ，$event)
- @input=$emit(input ，$event)
/
这一行代码可以解决绑定所有原生事件的问题。
使用场景
在组件传递值时使用：爷爷在父组件中传递值，父组件通过$attrs获取所有不在父属性中的属性。父组件将$attrs和$listeners绑定到孙子组件，使孙子组件获得爷爷传递的值，并可以调用爷爷定义的方法。
一些UI库用于二次封装：例如element-ui。当里面的组件不能满足自己的使用场景时，就会重新封装，但是又想保留自己的属性和方法。那么$attrs和$ listners在这个时候就是一个完美的解决方案。
总结
关于Vue包组件的$attrs和$listeners的使用，本文到此结束。关于Vue包组件的$attrs和$listeners的使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。