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是獲取不到值的。