vue中的$attrs 与 $listeners 的用法

vue中的 $attrs 与 $listeners ,主要是作为一个中间层,承接组件外部与内部的属性与方法。

示例:

复制代码
// child.vue 
1
<template lang="pug"> 2 .child-page 3 .text 展示code:{{code}} 4 el-button(v-bind="$attrs" v-on="$listeners") 5 slot 6 </template> 7 <script> 8 export default { 9 props: ["code"] //单独领出来放在props里的属性可以通过this[key]获取,否则如果这个code不放在props,那this.code是获取不到的,都会被传入到$attrs里去 10 }; 11 </script>

复制代码
复制代码

// parent.vue 
 1 <template lang="pug">
 2   child(type="primary" size="small" @click="dian" code="btnCode") 点击
 3  </template>
 4 <script>
 5 import child from "./child"
 6 export default {
 7   components:{child},
 8   methods: {
 9     dian() {
10       console.log("点击了");
11     }
12   }
13 };
14 </script>
复制代码

展示效果:

 

 

 

 

 如果不使用$attrts 与 $listeners,那么会增加很多的代码量,代码不够优美简约,示例如下:

复制代码

// child.vue 
 1 <template lang="pug">
 2 .child-page
 3   .text 展示code:{{code}}
 4   // 麻烦1 :要把props都列出来传给按钮; 麻烦2:还得把对应的事件emit出去
 5   el-button(:disabled="disabled" :size="size" :type="type" @click="()=>{this.$emit('click')}")
 6       slot
 7 </template>
 8 <script>
 9 export default {
10   props: ["code", "disabled", "size", "type"] //麻烦3:要列出一些列按钮需要的props,非常麻烦
11 };
12 </script>
复制代码

parent.vue没有改动

 

 

 

 

总结:$attrs 与 $listeners ,主要是作为一个中间层,承接组件外部与内部的属性与方法。将外部传送的props都通过

v-bind="$attrs"传给内部的组件;将外部执行的事件,通过v-on="$listeners"传给内部的组件

在使用 $attrs 需要注意一下,如果自身组件也需要使用这个属性,如上述例子中的code,那么需要在props中把code这个属性拎出来,不然都用$attrs传到下面组件的话,自身this.code是获取不到值的。

 

posted @   蛙仔  阅读(892)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示