vue如何使用$attrs和$listeners進(jìn)行多層級的數(shù)據(jù)和事件傳遞

這篇文章主要介紹了vue如何使用$attrs和$listeners進(jìn)行多層級的數(shù)據(jù)和事件傳遞，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用 $attrs 和 $listeners 進(jìn)行多層級的數(shù)據(jù)和事件傳遞

先聊聊如何傳遞 Prop，可以分為靜態(tài)和動(dòng)態(tài)的 Prop：

<!-- 靜態(tài)的prop -->
<blog-post title="My journey with Vue"></blog-post>
<!-- 動(dòng)態(tài)的prop -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 動(dòng)態(tài)的prop傳遞可以簡寫成 -->
<blog-post :title="post.title"></blog-post>
<!-- 需要傳遞多個(gè)prop的時(shí)候，可以一起寫在v-bind上 -->
<blog-post v-bind="{ editable, title: post.title}"></blog-post>

了解了 Props 的傳遞方式，在看看官方文檔是怎么定義 $attrs 的，  在尤大大的文檔中這樣介紹了 $attrs：

$attrs:  包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 class 和 style 除外)。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件

$attrs  包含了傳入到父作用域中沒有在 props 聲明的其他 props，因此我們可以用 $attrs 去代替那些父組件中不需要的而子組件需要的 props， 通過 v-bind="$attrs" 統(tǒng)一傳遞給后代。這樣就避免了一個(gè)個(gè)聲明然后再一個(gè)個(gè)傳遞。

<blog-post v-bind="$attrs"></blog-post>

上面這一行代碼就通過 v-bind="$attrs" 的方式將本作用域中不作為 prop 的其他屬性傳遞給了 blog-post 組件。

父組件通過 $attrs 傳遞給后代組件后，后代組件如果想通過觸發(fā)事件來更新父組件狀態(tài)該如何處理？如果一級一級地往上 emit 事件，會(huì)不會(huì)弄得代碼太繁瑣復(fù)雜了？在 Vue 中可以通過 $listeners 解決這個(gè)問題，先看看官方文檔關(guān)于  $listeners 的說明：

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。

文檔中說了 $listeners 包含了父作用域中的事件監(jiān)聽器。意思就是 $listeners 表示了父組件中的事件監(jiān)聽器集合，只要是觸發(fā)父組件的事件，而不是自己的，就可以用一個(gè) v-on="$listeners"表示。

<!-- 父組件（第一層組件） -->
<componentA @on-change="handleChange" v-bind="{ editable, title: post.title}" />

<!-- 中間層的組件 -->
<Child v-bind="$attrs" v-on="$listeners"/>

<!-- 數(shù)據(jù)傳遞的目標(biāo)組件，事件觸發(fā)的組件 -->
<div @click="handleClick">{{ title }} </div>
<script>
  export default {
    props: {
      title: String
    }
    handleClick() {
      this.$emit('on-change', 'New Title');
    }
  }
</script>

上面的代碼示例中，中間層的組件內(nèi)通過 v-bind="$attrs" 將其余的 Prop 傳遞給了 Child 組件，再通過 v-on="$listeners" 綁定父作用域中的事件監(jiān)聽器，一旦 emit 就會(huì)傳給了父組件。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何使用$attrs和$listeners進(jìn)行多層級的數(shù)據(jù)和事件傳遞”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!