Vuev2.4中新增的$attrs及$listeners屬性使用教程-創(chuàng)新互聯(lián)

前言

多級組件嵌套需要傳遞數(shù)據(jù)時，通常使用的方法是通過vuex。如果僅僅是傳遞數(shù)據(jù)，而不做中間處理，使用 vuex 處理，未免有點殺雞用牛刀。Vue 2.4 版本提供了另一種方法，使用 v-bind=”$attrs”, 將父組件中不被認(rèn)為 props特性綁定的屬性傳入子組件中，通常配合 interitAttrs 選項一起使用。之所以要提到這兩個屬性，是因為兩者的出現(xiàn)使得組件之間跨組件的通信在不依賴 vuex 和事件總線的情況下變得簡潔，業(yè)務(wù)清晰。

創(chuàng)新互聯(lián)主營三門峽網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),三門峽h5重慶小程序開發(fā)搭建,三門峽網(wǎng)站營銷推廣歡迎三門峽等地區(qū)企業(yè)咨詢

首先分析以下應(yīng)用場景：

A 組件與 B 組件之間的通信： （父子組件）

如上圖所示，A、B、C三個組件依次嵌套，按照 Vue 的開發(fā)習(xí)慣，父子組件通信可以通過以下方式實現(xiàn)：

• A to B 通過props的方式向子組件傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現(xiàn)
• 通過設(shè)置全局Vuex共享狀態(tài)，通過 computed 計算屬性和 commit mutation的方式實現(xiàn)數(shù)據(jù)的獲取和更新，以達(dá)到父子組件通信的目的。
• Vue Event Bus，使用Vue的實例，實現(xiàn)事件的監(jiān)聽和發(fā)布，實現(xiàn)組件之間的傳遞。

往往數(shù)據(jù)在不需要全局的情況而僅僅是父子組件通信時，使用第一種方式即可滿足。

A 組件與 C 組件之間的通信： （跨多級的組件嵌套關(guān)系）

如上圖，A 組件與 C 組件之間屬于跨多級的組件嵌套關(guān)系，以往兩者之間如需實現(xiàn)通信，往往通過以下方式實現(xiàn)：

• 借助 B 組件的中轉(zhuǎn)，從上到下props依次傳遞，從下至上，$emit事件的傳遞，達(dá)到跨級組件通信的效果
• 借助Vuex的全局狀態(tài)共享
• Vue Event Bus，使用Vue的實例，實現(xiàn)事件的監(jiān)聽和發(fā)布，實現(xiàn)組件之間的傳遞。

很顯然，第一種通過props和$emit的方式，使得組件之間的業(yè)務(wù)邏輯臃腫不堪，B組件在其中僅僅充當(dāng)?shù)氖且粋€中轉(zhuǎn)站的作用。如使用第二種 Vuex的方式，某些情況下似乎又有點大材小用的意味，（僅僅是想實現(xiàn)組件之間的一個數(shù)據(jù)傳遞，并非數(shù)據(jù)共享的概念）。第三種情況的使用在實際的項目操作中發(fā)現(xiàn)，如不能實現(xiàn)很好的事件監(jiān)聽與發(fā)布的管理，往往容易導(dǎo)致數(shù)據(jù)流的混亂，在多人協(xié)作的項目中，不利于項目的維護(hù)。

$attrs以及$listeners的出現(xiàn)解決的就是第一種情況的問題，B 組件在其中傳遞props以及事件的過程中，不必在寫多余的代碼，僅僅是將$attrs以及$listeners向上或者向下傳遞即可。

示例代碼

如下所示：

A組件（App.vue）

<template>
 <div id="app">
 <child1
 :p-child1="child1"
 :p-child2="child2"
 v-on:test1="onTest1" //此處監(jiān)聽了兩個事件，可以在B組件或者C組件中直接觸發(fā)
 v-on:test2="onTest2"> 
 </child1>
 </div>
</template>
<script>
 import Child1 from './Child1.vue';
 export default {
 data () {
 return {};
 },
 components: { Child1 },
 methods: {
 onTest1 () {
 console.log('test1 running...');
 },
 onTest2 () {
 console.log('test2 running');
 }
 }
 };
</script>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文題目：Vuev2.4中新增的$attrs及$listeners屬性使用教程-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article4/cddeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、服務(wù)器托管、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、商城網(wǎng)站、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)