vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)

更新時(shí)間：2022年10月29日 15:35:55 作者：前端阿彬

周所周知vue的props是單向數(shù)據(jù)流,可以從父組件中改變傳往子組件的props,反之則不行,下面這篇文章主要給大家介紹了關(guān)于vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下

前言

最近新項(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')
    }
  }

相關(guān)vue3文檔

2. 修改父組件復(fù)雜數(shù)據(jù)（對(duì)象）

在vue2.x中，子組件雖然不能修改父組件傳過(guò)來(lái)的普通數(shù)據(jù)，但是可以直接操作復(fù)雜數(shù)據(jù)，但是vue3不行。目前我只能用類似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.js創(chuàng)建Calendar日歷效果
這篇文章主要為大家詳細(xì)介紹了Vue.js創(chuàng)建Calendar日歷效果的過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)操作彈出框的示例
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)操作彈出框的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-11-11
vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用
這篇文章主要介紹了vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用，Axios?是一個(gè)基于?promise?的?HTTP?庫(kù)，下面文章圍繞主題的相關(guān)資料展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-04-04
vue元素實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果
這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法
這篇文章主要介紹了Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法，nuxt.js會(huì)根據(jù)pages目錄結(jié)構(gòu)自動(dòng)生成vue-router模塊的路由配置。非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-11-11
淺析Vue單文件組件與非單文件組件使用方法
這篇文章主要介紹了Vue單文件組件與非單文件組件使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-12-12
vue 虛擬dom的patch源碼分析
這篇文章主要介紹了vue 虛擬dom的patch源碼分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁(yè)中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下
2023-04-04
vue組件傳值的11種方式總結(jié)
這篇文章主要介紹了vue組件傳值的11種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is
本文主要介紹了Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is not available，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07