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