Vue中$attrs與$listeners的使用教程

更新時間：2021年11月29日 14:29:03 作者：熱心的前端人員

這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

介紹

$attrs

繼承所有的父組件屬性（沒有通過 props 接收的屬性還有 class 類名和 style 樣式）。

inheritAttrs：

是否非 props 屬性顯示在標簽最外層，默認值 true ，就是繼承所有的父組件屬性（除了 props 特定綁定外）作為普通的HTML特性應(yīng)用在子組件的根元素上，如果你不希望組件的根元素繼承特性就設(shè)置 inheritAttrs: false? ,但是 class 還是會繼承。

$listeners

它是一個對象，能接收所有的方法綁定，里面包含了作用在這個組件上的所有監(jiān)聽器，配合 v-on="$listeners" 將所有的事件監(jiān)聽器指向這個組件的某個特定的子元素。

舉例

父組件中?

<template>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</template>
 
<script>
import Son from "./components/son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
};
</script>
 
<style></style>

子組件中

<template>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</template>
 
<script>
import Son from "./components/son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
};
</script>
 
<style></style>

可見，當 inheritAttrs 默認 false 時，屬性是傳入到子組件最外層的

當 inheritAttrs 為 true 后

當使用props接收屬性時，屬性就不會被顯示

總結(jié)：組件標簽上傳入的屬性如果子組件沒有接收會跑到子組件標簽最外層。

非 props 屬性可以通過 $attrs 接收 {屬性名：屬性值}

<template>
  <div>
    <img v-bind="$attrs" alt="" />
  </div>
</template>
 
<script>
export default {
  inheritAttrs: false,
};
</script>
<style scoped>
.img {
  width: 100px;
  height: 100px;
}
</style>

當給子組件綁定點擊事件時，是不會觸發(fā)點擊事件的，可以使用 .native 修飾符進行綁定成功