VUE父子元件傳遞資料

2021-09-12 18:05:56 字數 714 閱讀 1898

父元件 food 通過 props 把 值為 0 的 type 字段傳給子元件,子元件在初始化時可以拿到 type 字段,渲染出字元「0 水果」

// 父元件 food.vue

}

要保證非同步傳遞資料,根據vue的雙向繫結原理,不難得知,非同步傳遞的資料需要watch。

若props傳遞的資料關聯到模板中,則元件初始化時會watch該資料。可見下面**中的type和info。

若props傳遞的資料不關聯到模板,則為props傳遞的資料新增watch,在watch方法中修改關聯模板的物件。可見下面**中的child_type。此方法中,watch監聽到的是是發生變化的props,故需要對目標物件做初始化處理。

// 父元件 food.vue

type: }

type: }

info: }

資料存放在store中,父元件呼叫vuex中的方法改變資料。

若store的資料關聯子元件的模板,則子元件初始化時會watch該資料。

若store的資料不關聯子元件的模板,則為store的資料新增watch,在watch方法中修改關聯模板的物件。需要對關聯模板的物件初始化。

若父元件向子元件可能同步或非同步傳遞資料,則首先子元件需要在created或者computed中對目標物件初始化,並且子元件中需要watch由props傳遞的資料,並修改目標物件。

VUE父子元件傳遞資料

父元件 food 通過 props 把 值為 0 的 type 字段傳給子元件,子元件在初始化時可以拿到 type 字段,渲染出字元 0 水果 父元件 food.vue 要保證非同步傳遞資料,根據vue的雙向繫結原理,不難得知,非同步傳遞的資料需要watch。若props傳遞的資料關聯到模板中,則元...

vue 父子元件傳遞

子元件接收父元件的資料可以使用props和bind進行 父元件 監聽子元件觸發的changehi事件,然後呼叫changehi方法 子元件 props cdata 接收父元件傳遞 父元件要監聽子元件的事件發生可以使用emit和on進行,子元件必須要觸發事件,然後父元件才可以接收到。子元件 metho...

vue父子元件傳遞引數

父元件 展示如下 子元件 展示如下 向父元件傳值 以上 展示即可實現父子元件的資料傳遞。有一種場景 父元件需要在頁面初始化時請求介面獲取資料,此時父元件中引入了子元件,需向子元件傳遞資料,而此時父元件還並沒有完成請求,因此傳遞給子元件的資料為空。解決方法如下 1 在子元件中使用watch監聽 wat...