Vue中的$attrs和$listener的使用

点击上方“ 青年码农 ”关注

回复“特效源码”可获取各种资料

前面讲了关于vue组件间数据传递，如果没有看过，关注公众号，有历史推荐，讲的比较详细，有代码，新手也能看懂，今天说一说$attrs和$listener。

疫情之前，在家关了这么久，也没怎么更新，最近在看大佬的项目，学习下新的思路。之前项目上，父子组件传递数据，都是用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>
&nbsp;&nbsp; <div&nbsp;id="father">
&nbsp;&nbsp;&nbsp;&nbsp; <child&nbsp;prem="参数"&nbsp;@focus="fatherFn">
&nbsp;&nbsp;&nbsp;&nbsp; </child>
&nbsp;&nbsp; </div>
</template>

子组件我们还是用porps接收，代码就不贴了，如果子组件中又引用了其他组件，那我们常规做法是子组件中在通过设置属性再传递到孙子组件，或者用vuex，现在我们可以使用$attrs

//&nbsp;child组件
<template>
&nbsp;&nbsp; <div&nbsp;id="child">
&nbsp;&nbsp;&nbsp;&nbsp; <son&nbsp;v-bind="$attrs"&nbsp;v-on="$listener"> </son>
&nbsp;&nbsp; </div>
</template>

在son组件中，可以直接使用

//&nbsp;son组件
{{&nbsp;$attrs.prem&nbsp;}}

或者用props接收

props:&nbsp;{
&nbsp;&nbsp; prem:{
&nbsp;&nbsp;&nbsp;&nbsp;type:String,
&nbsp;&nbsp;&nbsp;&nbsp;default: "默认值"
&nbsp;&nbsp;}
}

使用$attrs的好处是：

• 在子组件中不用再通过props来接收来自父组件的信息

• 在子组件中调用孙子组件，绑定$attrs，孙子组件就可以直接接收父组件的内容

• 多层传递省时省力

$listener

官方解释：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"&nbsp;传入内部组件——在创建更高层次的组件时非常有用。

$listeners，它是一个对象，里面包含了作用在这个组件上的所有监听器。

子组件打印

console.log( this.$listeners)

可以用对象解构

const&nbsp;{&nbsp; focus&nbsp;}&nbsp;=&nbsp;this. $listeners;

$listeners的作用很明显，就是在高层组件像低层组件传参（上面讲到的$attrs），或者其他方式，那低层组件如何向高层组件传递数据呢，用$listeners即可。解构后，和调用正常函数一样。

最后

以上就是神勇美女为你收集整理的Vue中的$attrs和$listener的使用的全部内容，希望文章能够帮你解决Vue中的$attrs和$listener的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。