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