vue2.0 子組件改變props值,并向父組件傳值的方法

為什么我們會有修改 prop 中數據的沖動呢？通常是這兩種原因：

prop 作為初始值傳入后，子組件想把它當作局部數據來用；

prop 作為初始值傳入，由子組件處理成其它數據輸出。

對這兩種原因，正確的應對方式是：

定義一個局部變量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

定義一個計算屬性，處理 prop 的值并返回。

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，如果 prop

是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

我們知道，父組件是使用 props 傳遞數據給子組件，但子組件怎么跟父組件通信呢？這個時候 Vue 的自定義事件系統就派得上用場了。 https://cn.vuejs.org/v2/guide/components.html#自定義事件

在父組件中定義兩個變量，動態綁定到子組件中

子組件：

父組件：定義兩個方法，并綁定到子組件自定義事件上

以上這篇vue2.0 子組件改變props值,并向父組件傳值的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com