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

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

prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來用；

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

對這兩種原因，正確的應(yīng)對方式是：

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

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

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

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

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

是一個對象或數(shù)組，在子組件內(nèi)部改變它會影響父組件的狀態(tài)。

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

在父組件中定義兩個變量，動態(tài)綁定到子組件中

子組件：

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

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

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