vue中父子元件之間的通訊

2021-09-08 08:39:18 字數 571 閱讀 7433

以前學期vue元件之間通訊的時候,頭痛,感覺好麻煩,結果今天遇到了,躲不掉了,所以今天就查了一下父子組價之間的通訊方法,小小總結一下

首先是,父元件向子元件傳遞變數(即子元件要呼叫父元件中的變數),有如下**:

//在父元件中呼叫子元件,father_variable為子元件要呼叫的變數

//子元件內//這樣就可以呼叫了

子元件向父元件傳遞變數,有如下**:主要就是emit()方法,記住emit中的方法名必須與呼叫父元件中的@方法名相同

//子元件內

onselectcausehandler(payload = {})

//父元件內

//這樣就傳遞過來了

父元件呼叫子元件中的方法,**如下:

//父元件內

父元件的methods中的方法中

this.$refs.child.fuc_name();

//即可以呼叫成功

子元件呼叫父元件的方法,用this.$parent.even,這個還沒深入了解,只是提一下而已,總結到此為止。

vue中父子元件之間的通訊

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

vue中父子元件之間的通訊

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

vue父子元件之間通訊

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