Vue父子元件通訊

2022-07-19 03:09:12 字數 753 閱讀 5863

我們知道,父元件不能修改子元件的資料【

這種說法是不嚴謹的】,嚴謹的說法是:子元件內部不能修改從父元件傳遞過來的值。原因是vue遵循的是資料單向流原則,父元件傳遞資料給子元件只能單向繫結,通過props,子元件通過$emit發射自定義事件傳參到父元件,而資料的改變是只能父元件改變父元件的,子元件改變子元件的。

說到底,props裡面的資料其實是父元件的,所以子元件不能私自修改,若修改vue會報錯不讓修改。props裡面的資料其實是子元件去獲取父元件的資料,子元件無權修改,只有父元件能做修改。

那麼:子元件若是想要修改父元件傳遞過來的props資料呢?

答:子元件自己不能修改,可以傳參給父元件,讓父元件自己去做修改即可。

子元件內部定義乙個區域性變數,用prop初始化,然後定義乙個計算屬性處理prop的值並返回。

我們知道,各自元件可以修改自己的data屬性的引數值,那麼,如何在父元件中修改子元件data裡面的資料呢?

可以通過在父元件呼叫子元件:加上ref屬性,這樣在父元件裡面就可以:

this.$refs.notice_add.dialogformvisible = true;

在父元件裡面這樣子操作子元件data裡面的引數了,本質其實還是子元件修改內部資料。

至此,父元件通過props傳參給子元件,子元件通過$emit事件傳參給父元件,也可以在父元件呼叫子元件事件或者改變子元件data數值,所有改變的情況都已經清楚!

【完】連死都不怕,你還怕什麼?

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名,html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件,父元件利用v on對事件進行監聽,實現引數的傳遞...

Vue父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容,需要引入props,也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數,則某個部分要和引數post對應,即 v bind post post...