vue中父子元件之間的通訊

2021-09-22 22:52:13 字數 1351 閱讀 3661

父元件到子元件的通訊主要為:子元件接受使用父元件的資料,這裡的資料報括屬性和方法(string,number,boolean,object, array ,function)。vue提倡單項資料流,因此在通常情況下都是父元件傳遞資料給子元件使用,子元件觸發父元件的事件,並傳遞給父元件所需要的引數。

父子通訊中最常見的資料傳遞方式就是通過props傳遞資料,就好像方法的傳參一樣,父元件呼叫子元件並傳入資料,子元件接受父元件傳遞的資料進行驗證使用。

}

props可以接受function,所以function也可以以這種方式傳遞到子元件使用。

但是在子元件中不能監聽父元件傳過來的資料。

通過$on傳遞父元件方法是元件通訊中常用的方法傳遞方式。它可以與通過props傳遞方法達到相同的效果。相比於props傳遞function,它更加的直觀和顯式的表現出了呼叫關係。

準確來說這種方式並不屬於資料的傳遞而是一種主動的查詢。父元件並沒有主動的傳遞資料給子元件,而是子元件通過與父元件的關聯關係,獲取了父元件的資料。

該方法雖然能實現獲取父元件中的資料但是不推薦這種方式,因為vue提倡單向資料流,只有父元件交給子元件的資料子元件才有使用的許可權,不允許子元件私自獲取父元件的資料進行使用。在父與子的關係中子應當是處於一種被動關係。

this.$parent
此處的this為子元件例項

子元件到父元件的通訊主要為父元件如何接受子元件之中的資料。這裡的資料報括屬性和方法(string,number,boolean,object, array ,function)。

與父元件到子元件通訊中的$on配套使用,可以向父元件中觸發的方法傳遞引數供父元件使用。

可以通過在子元件新增ref屬性,然後可以通過ref屬性名稱獲取到子元件的例項。準確來說這種方式和this.$parent一樣並不屬於資料的傳遞而是一種主動的查詢。

盡量避免使用這種方式。因為在父子元件通訊的過程中。父元件是處於高位是擁有控制權,而子元件在多數情況下應該為純檢視元件,只負責檢視的展示和自身檢視的邏輯操作。對外互動的權利應該由父元件來控制。所以應當由父元件傳遞檢視資料給子元件,子元件負責展示。而子元件的對外互動通過$emit觸發父元件中相應的方法,再由父元件處理相應邏輯。

this.$refs['child']

vue中父子元件之間的通訊

父子元件通訊原則 1.父子元件是單向資料流,父元件狀態更新,子元件中prop狀態也會更新,但子元件的狀態變化不會影響父元件。在修改子元件的porp時,console會報錯。原因 防止子元件無意間修改父元件的狀態,避免資料流變得難以理解。如果父元件傳遞給子元件的的狀態時物件 或者 陣列,因為兩者是按引...

vue中父子元件之間的通訊

以前學期vue元件之間通訊的時候,頭痛,感覺好麻煩,結果今天遇到了,躲不掉了,所以今天就查了一下父子組價之間的通訊方法,小小總結一下 首先是,父元件向子元件傳遞變數 即子元件要呼叫父元件中的變數 有如下 在父元件中呼叫子元件,father variable為子元件要呼叫的變數 子元件內 這樣就可以呼...

vue父子元件之間通訊

1 父元件向子傳遞引數 只需要在子元件內使用props即可獲取。2 子元件返回引數給父元件 子元件中設定 emit func data 父元件中直接取出func即可。注意 父元件向子元件傳參是單向的,若子元件直接修改父元件的引數,vue會報錯。如果需要修改,則有2種方式 方式一 在子元件中複製父變數...