Vue中的$attrs和$listener的使用

作者: 青年码农 | 来源:发表于2022-05-26 11:02 被阅读0次

点击上方“青年码农”关注回复“特效源码”可获取各种资料<blockquote>前面讲了关于vue组件间数据传递，如果没有看过，关注公众号，有历史推荐，讲的比较详细，有代码，新手也能看懂，今天说一说 $attrs和$ listener。</blockquote>疫情之前，在家关了这么久，也没怎么更新，最近在看大佬的项目，学习下新的思路。之前项目上，父子组件传递数据，都是用props去接收和this. $emit触发父组件方法。这次我们用$ attrs和 $listener，都是在2.4.0新增。$ attrs官方解释：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=" $attrs" 传入内部组件——在创建高级别的组件时非常有用。通俗易懂的说就是用$ attrs可以获取父组件传递过来的所有属性，不包含class，style和props中接收的。比如父组件：// father组件
<template>
<div id="father">
<child prem="参数" @focus="fatherFn">
</child>
</div>
</template>
子组件我们还是用porps接收，代码就不贴了，如果子组件中又引用了其他组件，那我们常规做法是子组件中在通过设置属性再传递到孙子组件，或者用vuex，现在我们可以使用 $attrs // child组件 <template> <div id="child"> <son v-bind="$ attrs" v-on=" $listener"></son> </div> </template> 在son组件中，可以直接使用 // son组件 {{$ attrs.prem }}
或者用props接收props: {
prem:{
type:String,
default:"默认值"
}
}使用 $attrs的好处是： <ol><li>在子组件中不用再通过props来接收来自父组件的信息</li><li>在子组件中调用孙子组件，绑定$ attrs，孙子组件就可以直接接收父组件的内容</li><li>多层传递省时省力</li></ol> $listener官方解释：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$ listeners" 传入内部组件——在创建更高层次的组件时非常有用。 $listeners，它是一个对象，里面包含了作用在这个组件上的所有监听器。子组件打印 console.log(this.$ listeners)
<div class="image-package"><img src="https://img.haomeiwen.com/i8877503/c74f3eeb99fa62cd.jpeg" img-data="{"format":"jpeg","size":3594,"height":96,"width":465}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div>可以用对象解构
const { focus } = this. $listeners; $ listeners的作用很明显，就是在高层组件像低层组件传参（上面讲到的 $attrs），或者其他方式，那低层组件如何向高层组件传递数据呢，用$ listeners即可。解构后，和调用正常函数一样。

Vue中的$attrs和$listener的使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读