vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)
前言
最近新項(xiàng)目用vue3搭建的，準(zhǔn)備開(kāi)始使用vue3的語(yǔ)法，從這篇開(kāi)始記錄下vue3遇到的一些問(wèn)題和一些語(yǔ)法的使用方法，以便于以后復(fù)習(xí)，也可能幫助到一些小伙伴。
1. 修改父組件普通數(shù)據(jù)
使用v-mode語(yǔ)法，代替了vue2.x的.sync修飾符
- 父組件用ref() 定義一個(gè)普通數(shù)據(jù)為響應(yīng)式變量，例 var test = ref(‘parent’)
- 父組件用v-mode將數(shù)據(jù)綁定到子組件上
<ChildComponent v-model:test="test" />
其實(shí)它是以下的簡(jiǎn)寫(xiě)：
<ChildComponent :test="test" @update:test="test = $event" />
3.子組件
子組件使用emit修改父組件數(shù)據(jù)
//ChildComponent
props: {
test:String //接收父組件數(shù)據(jù)
},
emits: ['update:test'], //定義組件可觸發(fā)的事件
setup(props,ctx){
function onClick() {
ctx.emit('update:test','child')
}
}
2. 修改父組件復(fù)雜數(shù)據(jù)（對(duì)象）
在vue2.x中，子組件雖然不能修改父組件傳過(guò)來(lái)的普通數(shù)據(jù)，但是可以直接操作復(fù)雜數(shù)據(jù)，但是vue3不行。目前我只能用類(lèi)似vue2的語(yǔ)法來(lái)解決修改父組件對(duì)象數(shù)據(jù)的問(wèn)題，如有哪位大佬有更好的辦法，還希望評(píng)論區(qū)指教?。?！
父組件reactive定義一個(gè)對(duì)象為響應(yīng)式數(shù)據(jù)，并綁定到子組件上，例如
<ChildComponent :obj="obj" @update:obj="updateObj" />
const obj = reactive({
key: 'test'
})
父組件定義一個(gè)修改數(shù)據(jù)的方法
function updateObj(params){
obj.key = params
}
return{
updateObj
}
子組件emit定義一個(gè)可觸發(fā)的事件
//ChildComponent
props: {
obj:Object //接收父組件數(shù)據(jù)
},
emits: ['update:obj'], //定義組件可觸發(fā)的事件
setup(props,ctx){
function onClick() {
ctx.emit('update:obj','child')
}
}
最后
我試過(guò)用第一種修改普通數(shù)據(jù)的方式修改父組件對(duì)象，但是發(fā)現(xiàn)沒(méi)有效果，好像是reactive定義的響應(yīng)式數(shù)據(jù)，用v-model綁定后就被覆蓋成普通對(duì)象了，不知道是不是，望vue3大佬指教！
到此這篇關(guān)于vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue3修改父組件傳的props數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文介紹了Vue keep-alive組件的使用及如何清除緩存,給大家分享清除緩存的幾種方法,結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友跟隨小編一起看看吧2023-10-10
快速解決vue-cli在ie9+中無(wú)效的問(wèn)題
今天小編就為大家分享一篇快速解決vue-cli在ie9+中無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐
本文主要介紹了avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐，主要包括對(duì)搜索欄進(jìn)行自定義，并通過(guò)按鈕實(shí)現(xiàn)折疊搜索欄效果，具有一定的參考價(jià)值，感興趣的可以了解一下2021-12-12
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
這篇文章主要介紹了Vue字符串中如何添加多個(gè)空格問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解vue+axios給開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址
這篇文章主要介紹了詳解vue+axios給開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例，這次搭建的測(cè)試環(huán)境和開(kāi)發(fā)環(huán)境隔離，所以理論上適用所有使用vue的開(kāi)發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05
一次前端Vue項(xiàng)目國(guó)際化解決方案的實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于前端Vue項(xiàng)目國(guó)際化解決方案的實(shí)戰(zhàn)記錄,以上只是一部分Vue項(xiàng)目開(kāi)發(fā)中遇到的典型問(wèn)題和解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
最近工作中遇到一個(gè)需求，是要做一個(gè)頁(yè)面放張大表格用來(lái)顯示數(shù)據(jù)項(xiàng)，純粹為了view層操作方便，就用了vue做渲染。然而又被提出了一個(gè)需求，需要相鄰的相同值的行數(shù)據(jù)項(xiàng)進(jìn)行單元格合并，這就醉了。沒(méi)辦法，只能想辦法解決，下面通過(guò)這篇文章來(lái)一起看看吧。2016-11-11
Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例
下面小編就為大家分享一篇Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03