快捷導(dǎo)航

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

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

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

介紹

$attrs

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

inheritAttrs：

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

$listeners

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

舉例

父組件中?

<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>

可見，當(dāng) inheritAttrs 默認(rèn) false 時(shí)，屬性是傳入到子組件最外層的

當(dāng) inheritAttrs 為 true 后

當(dāng)使用props接收屬性時(shí)，屬性就不會(huì)被顯示

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

非 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>

當(dāng)給子組件綁定點(diǎn)擊事件時(shí)，是不會(huì)觸發(fā)點(diǎn)擊事件的，可以使用 .native 修飾符進(jìn)行綁定成功