vue如何使用$attrs和$listeners進行多層級的數據和事件傳遞

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

使用 $attrs 和 $listeners 進行多層級的數據和事件傳遞

先聊聊如何傳遞 Prop，可以分為靜態和動態的 Prop：

<!-- 靜態的prop -->
<blog-post title="My journey with Vue"></blog-post>
<!-- 動態的prop -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 動態的prop傳遞可以簡寫成 -->
<blog-post :title="post.title"></blog-post>
<!-- 需要傳遞多個prop的時候，可以一起寫在v-bind上 -->
<blog-post v-bind="{ editable, title: post.title}"></blog-post>

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

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

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

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

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

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

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

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

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

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

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

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

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