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

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

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

背景

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

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

一、文檔描述

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

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

（3）$listeners：包含了父作用域中(不含 .native 修飾器的)v-on事件監(jiān)聽器。他可以通過 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ā)生了點擊事件，我收到了')
    }
  }
}
</script>

2. 兒子組件（Child.vue）

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

$attrs是從父組件傳過來的，且兒子組件未通過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接收從父組件傳遞過來的數(shù)據(jù)

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

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

三、總結(jié)

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

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

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

您可能感興趣的文章: