vue2.0 子組件改變props值,并向父組件傳值的方法
為什么我們會(huì)有修改 prop 中數(shù)據(jù)的沖動(dòng)呢？通常是這兩種原因：
prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來(lái)用；
prop 作為初始值傳入，由子組件處理成其它數(shù)據(jù)輸出。
對(duì)這兩種原因，正確的應(yīng)對(duì)方式是：
定義一個(gè)局部變量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定義一個(gè)計(jì)算屬性，處理 prop 的值并返回。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在 JavaScript 中對(duì)象和數(shù)組是引用類(lèi)型，指向同一個(gè)內(nèi)存空間，如果 prop
是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。
我們知道，父組件是使用 props 傳遞數(shù)據(jù)給子組件，但子組件怎么跟父組件通信呢？這個(gè)時(shí)候 Vue 的自定義事件系統(tǒng)就派得上用場(chǎng)了。 https://cn.vuejs.org/v2/guide/components.html#自定義事件
在父組件中定義兩個(gè)變量，動(dòng)態(tài)綁定到子組件中
子組件：
父組件：定義兩個(gè)方法，并綁定到子組件自定義事件上
以上這篇vue2.0 子組件改變props值,并向父組件傳值的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp-vue3-彈出選擇組件wo-pop-selector使用示例
wo-pop-selector彈出選擇組件采用uniapp-vue3實(shí)現(xiàn), 支持H5、微信小程序,本文給大家介紹uniapp-vue3-彈出選擇組件wo-pop-selector及使用示例,感興趣的朋友一起看看吧2023-10-10
vue2 v-model/v-text 中使用過(guò)濾器的方法示例
這篇文章主要介紹了vue2 v-model/v-text 中使用過(guò)濾器的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Vue中響應(yīng)式系統(tǒng)實(shí)現(xiàn)原理圖文講解
Vue的響應(yīng)式實(shí)現(xiàn)是借助Object.defineProperty通過(guò)重寫(xiě)getter和setter方法來(lái)進(jìn)行的數(shù)據(jù)劫持，Vue3通過(guò)Proxy代理攔截對(duì)象中任意屬性的變化，通過(guò)Reflect反射對(duì)源對(duì)象的屬性進(jìn)行操作，然后再在get里收集依賴在set里派發(fā)更新2023-03-03
vue2+elementui進(jìn)行hover提示的使用
本文主要介紹了vue2+elementui進(jìn)行hover提示的使用，主要分為外部和內(nèi)部，具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法
在vsCode中書(shū)寫(xiě)Vue頁(yè)面時(shí)無(wú)法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03
vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn)
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
husky是一個(gè)git hooks工具（git的鉤子工具，可以在特定時(shí)機(jī)執(zhí)行特定的命令），這篇文章主要介紹了Vue3-基于husky的代碼檢查工作流,需要的朋友可以參考下2023-11-11
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09
這篇文章主要為大家詳細(xì)介紹了vue插件tab選項(xiàng)卡的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Vue全局變量局部變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04