vue $listeners $attr,listeners vue
本文主要介绍vue$attrs和$listeners的用法和区别。用示例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
首先，让我们看一下这个图，它显示了一个多层次的相关组件嵌套。
为什么要用$attrs 和 $listeners
我们先来思考一个情况，就是组件A如何与组件C进行通信，可以有多少种解决方案？
看到这种情况，大部分人应该会想到使用vuex进行数据通信，但如果是项目中的多个组件中的共享状态很少，且项目比较小，全局数据通信也很少，那么我们会觉得有点像是用刀杀鸡。我们可以使用组件B作为通信的中转站。当组件A需要向组件C传输数据时，组件A通过props将数据传输给组件B，然后组件B用props将数据传输给组件C。这是一个解决方案，但是如果嵌套的组件太多，代码就会冗余繁琐，维护起来也很困难。而且如果组件C也要向组件A传输数据，那么定制一条Vue数据总线会比较麻烦，适合组件跨级传输数据。但缺点是碰到多人合作时，会导致代码的维护性较低，代码可读性也较低还有另外一种解决方案，就是使用provide inject，然而官方并不推荐这种方法，因为比如这个方法真的是太不好管控了，我在根组件中提供了这个，而孙组件在这个中使用了一个变量。这个时候很难追溯到这个变量的来源，你也不知道项目中的哪个组件使用过这个变量，在其他组件中是否被更改过，所以这个api在项目中很少使用。然而，在许多开发情况下，许多人用它来编写组件。我们只是想把组件A的数据传递给组件c，如果用props进行组件通信，可以实现，但是代码可读性不强，维护困难。
于是这个时候，我们的主角$attrs和$listeners出现了。
$attrs 和 $listeners 的用法
在vue2.4中，为了解决这个需求，引入了$attrs和$listeners，并增加了inheritAttrs选项。在2.4版本之前，默认情况下，不被识别为道具的父作用域的属性是百年孤独的，会被“回滚”并作为普通HTML特性应用于子组件的根元素。比如下面的例子
父组件的代码：
模板
差异
child-DOM:foo= foo :bar= bar /child-DOM
/div
/模板
脚本
“从以下位置导入童真”./components/attrs/childdom . vue ；
导出默认值{
组件：{
童年，
},
data() {
返回{
福：福，
酒吧：酒吧，
};
},
};
/脚本
子组件代码：
模板
差异
pfoo:{{ foo }}/p
/div
/模板
脚本
导出默认值{
道具：[foo]，
};
/脚本
我们先来看看控制台打印出来的dom结构是这样写的：
在2.4中，添加选项inheritAttrs，inheritAttrs的默认值为true，并将inheritAttrs的值设置为false。这些默认行为将被禁止。但是，通过实例属性$attrs，可以使这些特性生效，并且可以通过v-bind将它们绑定到子组件的非根元素。
修改子组件的代码：
模板
差异
pfoo:{{ foo }}/p
模式：{{ $attrs }}/p
DOM-child v-bind= $ attrs /DOM-child
/div
/模板
脚本
从导入DomChild。/DOM child . vue ；
导出默认值{
道具：[foo]，
inheritantrs:false，
组件：{
多姆蔡尔德，
},
};
/脚本
然后再加个孙子成分。
模板
差异
pbar:{{ bar }}/p
/div
/模板
脚本
导出默认值{
道具：[bar]，
};
/脚本
该页面显示如下：
从上面的代码可以看出，使用$attrs，inheritAttrs属性可以用简洁的代码将组件A的数据传递给组件C，这个场景的应用范围相当广泛。
现在我们来看看组件C是如何把值传递给组件A的？
VUE版本2.4增加了listeners属性。我们将V-on="$ listeners "绑定到组件B，并在组件a中监听组件C触发的事件。您可以将组件C发送的数据传输到组件a.
修改父组件的代码：
模板
差异
child-DOM:foo= foo :bar= bar @ upFoo= update /child-DOM
/div
/模板
脚本
"从以下位置导入童真"./components/attrs/childdom。vue ；
导出默认值{
组件：{
童年，
},
data() {
返回{
福："福",
酒吧：酒吧，
};
},
方法：{
更新(瓦尔){
this.foo=val
console.log(更新成功);
},
},
};
/脚本
子组件代码：
模板
差异
pfoo:{{ foo }}/p
模式：{{ $attrs }}/p
DOM-child v-bind= $ attrs v-on= $ listeners /DOM-child
/div
/模板
脚本
从导入DomChild ./DOM child。vue ；
导出默认值{
道具：[foo]，
继承者：假的，
组件：{
多姆蔡尔德，
},
};
/脚本
孙组件代码：
模板
差异
pbar:{{ bar }}/p
button @click=startUpFoo 我要更新foo/按钮
/div
/模板
脚本
导出默认值{
道具：[bar]，
方法：{
startUpFoo() {
这个. emit(upFoo ， fooooooooo )；
控制台。日志(“启动foo”)；
},
},
};
/脚本
运行结果：
现在我们应该清楚了$attrs，$ listerners，inheritAttrs的作用了吧
到此这篇关于vue $attrs和$听众的使用与区别的文章就介绍到这了，更多相关vue $attrs $listeners内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。