vue中的$attrs 与 $listeners 的用法

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

示例：

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

// parent.vue 

<template lang="pug">
  child(type="primary" size="small" @click="dian" code="btnCode") 点击
 </template>
<script>
import child from "./child"
export default {
  components:{child},
  methods: {
    dian() {
      console.log("点击了");
    }
  }
};
</script>

展示效果：

 

 

 

 

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

// child.vue 

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

parent.vue没有改动

 

 

 

 

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

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

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