詳解Vue中$props、$attrs和$listeners的使用方法

更新時(shí)間：2021年12月31日 15:40:03 作者：等風(fēng)來(lái)呀

本文主要介紹了Vue中$props、$attrs和$listeners的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

背景

現(xiàn)在我們來(lái)討論一種情況，父組件與孫子組件怎么通信，我們有多少種解決方案？

我們使用VueX來(lái)進(jìn)行數(shù)據(jù)管理，但是如果項(xiàng)目中多個(gè)組件共享狀態(tài)比較少，項(xiàng)目比較小，并且全局狀態(tài)比較少,那使用VueX來(lái)實(shí)現(xiàn)該功能，并沒(méi)有發(fā)揮出VueX的威力。
使用B來(lái)做中轉(zhuǎn)站，當(dāng)A組件需要把信息傳給C組件時(shí)，B接受A組件的信息，然后利用屬性傳給C組件， 這是一種解決方案，但是如果嵌套的組件過(guò)多，會(huì)導(dǎo)致代碼繁瑣，代碼維護(hù)比較困難;如果C中狀態(tài)的改變需要傳遞給A, 使用事件系統(tǒng)一級(jí)級(jí)往上傳遞。
自定義一個(gè)Vue 中央數(shù)據(jù)總線(xiàn)，這個(gè)情況適合碰到組件跨級(jí)傳遞消息，但是缺點(diǎn)是 碰到多人合作時(shí)，代碼的維護(hù)性較低，代碼可讀性低

一、文檔描述

（1）$props：當(dāng)前組件接收到的 props 對(duì)象。Vue 實(shí)例代理了對(duì)其 props 對(duì)象屬性的訪問(wèn)。

（2）$attrs：包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。

（3）$listeners：包含了父作用域中(不含 .native 修飾器的)v-on事件監(jiān)聽(tīng)器。他可以通過(guò) v-on="listeners"傳入內(nèi)部組件

二、具體使用

1、父組件

<template>
  <div>
    <div>父親組件</div>
    <Child
      :foo="foo"
      :zoo="zoo"
      @handle="handleFun"
    >
    </Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      foo: 'foo',
      zoo: 'zoo'
    }
  },
  methods: {
    // 傳遞事件
    handleFun(value) {
      this.zoo = value
      console.log('孫子組件發(fā)生了點(diǎn)擊事件，我收到了')
    }
  }
}
</script>

2. 兒子組件（Child.vue）

中間層，作為父組件和孫子組件的傳遞中介，在兒子組件中給孫子組件添加v-bind="$attrs"，這樣孫子組件才能接收到數(shù)據(jù)。

$attrs是從父組件傳過(guò)來(lái)的，且兒子組件未通過(guò)props接收的數(shù)據(jù)，例如zoo

<template>
  <div class='child-view'>
    <p>兒子組件--{{$props.foo}}與{{foo}}內(nèi)容一樣</p>
    <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue'
export default {
  // 繼承所有父組件的內(nèi)容
  inheritAttrs: true,
  components: { GrandChild },
  props: ['foo'],
  data() {
    return {
    }
  }
}
</script>

3. 孫子組件（GrandChild.vue）

在孫子組件中一定要使用props接收從父組件傳遞過(guò)來(lái)的數(shù)據(jù)

<template>
  <div class='grand-child-view'>
    <p>孫子組件</p>
    <p>傳給孫子組件的數(shù)據(jù)：{{zoo}}</p>
    <button @click="testFun">點(diǎn)我觸發(fā)事件</button>
  </div>
</template>

<script>
export default {
  // 不想繼承所有父組件的內(nèi)容,同時(shí)也不在組件根元素dom上顯示屬性
  inheritAttrs: false,
  // 在本組件中需要接收從父組件傳遞過(guò)來(lái)的數(shù)據(jù)，注意props里的參數(shù)名稱(chēng)不能改變，必須和父組件傳遞過(guò)來(lái)的是一樣的
  props: ['zoo'],
  methods: {
    testFun() {
      this.$emit('handle', '123')
    }
  }
}
</script>

三、總結(jié)

從上面的代碼，可以看出使用attrs、inheritAttrs屬性能夠使用簡(jiǎn)潔的代碼，將A組件的數(shù)據(jù)傳遞給C組件，該場(chǎng)景的使用范圍還是挺廣的。

通過(guò)listeners，我們?cè)赽組件上綁定 v-on=”$listeners”, 在a組件中，監(jiān)聽(tīng)c組件觸發(fā)的事件。就能把c組件發(fā)出的數(shù)據(jù)，傳遞給a組件。

到此這篇關(guān)于詳解Vue中$props、$attrs和$listeners的使用方法的文章就介紹到這了,更多相關(guān)Vue $props、$attrs和$listeners內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: