Vue中 父子傳值 資料丟失問題

2021-09-26 13:46:09 字數 892 閱讀 3662

在vue中,父子元件傳值,子元件通過props接收父元件傳遞的資料

父元件

questionlist : 傳遞資料引數

questionslists: 傳遞資料源

子元件

porps 接收父元件方式有倆中,一種是通過物件形式,一種是通過陣列形式,通過陣列形式接收多個資料時用逗號隔開即可。比如:props:[『a』,『b』]。

需要注意的是在子元件中 接收父元件的資料引數,必須和父元件傳遞時的 引數一致,上圖中的 questionlist

這種情況下會出現這麼乙個情況,重新整理頁面之後子元件接收的父元件資料會丟失,我們可以在watch裡面去監聽一下資料的變化。

重新對資料進行想要的處理,之後就會發現 怎麼重新整理都沒有問題了,資料都不會丟失。

-------------------------------分割線----------------------------------------

在這個過程中發現,在子元件的例項中 是有資料的,但是重新賦值給乙個新物件,新物件的值永遠是為空的。這個還沒有清楚是怎麼回事。有了解的 可以告知一下呀?

VUE父子元件傳值問題

元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。1.靜態props父元件 子元件 輸出 hello 2.動態props 要動態地繫結父元件的資料到子模板的props用 v bind。每當父元件的資...

Vue中父子元件的傳值問題

在父元件中使用子元件時,新增自定義屬性,屬性值為傳輸的內容 hello 父元件給子元件的內容 my footer 在子元件中,使用props 接受父元件中傳遞的屬性 props msg 多個屬性使用逗號分隔 props宣告在和date同級位置 html my header div js vue.co...

父子組建傳值 vue 父子元件傳值

父元件傳給子元件 子元件通過props方法接收資料 子元件傳給父元件 通過 emit方法傳遞引數 一 props方法 1.靜態傳值 父元件中子元件的標籤設定乙個自定義屬性並賦值 子元件中通過props方法接收 export default 2.動態傳值 根據父元件中值的變化,動態改變子元件中的值 父...