vue $listeners $attr,vue $attrs $listeners
本文主要介绍了Vue中$props、$attrs和$listeners的详细使用说明。通过示例代码非常详细，有一定的参考价值，感兴趣的朋友可以参考一下。
目录
背景一、文件说明二、具体用途三、摘要
背景
现在我们来讨论一个情况。父组件如何与子组件通信？我们有多少解决方案？
我们使用VueX进行数据管理，但是如果项目是多个组件共享状态比较少，项目比较小，全局状态比较小，那么使用VueX实现这个功能并没有发挥VueX的威力。用B作为中转站。当A组件需要向组件C发送信息时，B接受组件A的信息，然后利用属性发送给C组件，。这是一个解决方案，但是如果嵌套的组件太多，就会导致代码繁琐，代码维护困难。如果C中状态的改变需要传递给A, 使用事件系统一级级往上传递 。定制Vue中央数据总线。这种情况适合遇到组件时的跨级消息传递，但缺点是碰到多人合作时，代码的维护性较低，代码可读性低。
一、文档描述
(1)$props:当前组件接收的道具对象。Vue实例代理对其props对象属性的访问。
(2)$attrs:包含父作用域中不被识别(和获取)为属性的属性绑定(类和样式除外)。
(3)$listeners:父作用域中的v-on事件侦听器(没有。原生修饰语)。他可以通过v-on=listeners 传入内部组件
二、具体使用
1、父组件
模板
差异
父分区组件/分区
儿童
:foo=foo
:zoo=zoo
@handle=handleFun
/孩子
/div
/模板
脚本
从导入子级。/Child.vue
导出默认值{
组件：{ Child }，
data() {
返回{
福：福，
动物园：“动物园”
}
},
方法：{
//传递事件
handleFun(值){
this.zoo=价值
Console.log(孙子组件发生了一个单击事件，我收到了它)
}
}
}
/脚本
2. 儿子组件（Child.vue）
中间层作为父组件和子组件之间的传输中介，将v-bind=$attrs 添加到子组件中的子组件，以便子组件可以接收数据。
$attrs是从父组件传递的数据，而不是子组件通过props(如zoo)接收的数据。
模板
div class=子视图
p子组件-{ - {{$props.foo}}}与{{foo}} /p具有相同的内容
孙v-bind= $ attrs v-on= $ listeners /孙
/div
/模板
脚本
从导入孙代。/孙儿. vue
导出默认值{
//继承所有父组件的内容
继承人：没错，
组件：{孙}，
道具：[foo]，
data() {
返回{
}
}
}
/脚本
3. 孙子组件（GrandChild.vue）
确保在孙子组件中使用props来接收从父组件传递的数据。
模板
div class=grand-child-view
Pgrandson组件/p
PData传递到孙子组件：{{zoo}}/p
Button @click=testFun 单击我的触发事件/按钮
/div
/模板
脚本
导出默认值{
//不想继承所有父组件的内容，同时不显示组件根元素dom上的属性。
inheritantrs:false，
//在这个组件中，需要接收父组件传递过来的数据。请注意，props中的参数名称不能更改，它们必须与从父组件传递的参数名称相同。
道具：[动物园]]，
方法：{
testFun() {
这个。$emit(handle ， 123 )
}
}
}
/脚本
三、总结
从上面的代码可以看出，使用attrs和inheritAttrs属性可以用简洁的代码将A组件的数据转移到C组件，这个场景的应用范围相当广泛。
通过listeners，我们在组件b上绑定v-on=”$listeners”,。在组件A中，我们监听由组件c触发的事件。您可以将组件c发送的数据传输到组件A.
关于$props，$attrs和$listeners在Vue中的详细使用方法的这篇文章就到这里了。有关Vue $props，$attrs和$listeners的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。