快捷導(dǎo)航

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

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

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

前言

最近新項(xiàng)目用vue3搭建的，準(zhǔn)備開始使用vue3的語法，從這篇開始記錄下vue3遇到的一些問題和一些語法的使用方法，以便于以后復(fù)習(xí)，也可能幫助到一些小伙伴。

1. 修改父組件普通數(shù)據(jù)

使用v-mode語法，代替了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)寫：

<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中，子組件雖然不能修改父組件傳過來的普通數(shù)據(jù)，但是可以直接操作復(fù)雜數(shù)據(jù)，但是vue3不行。目前我只能用類似vue2的語法來解決修改父組件對(duì)象數(shù)據(jù)的問題，如有哪位大佬有更好的辦法，還希望評(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')
    }
  }

最后

我試過用第一種修改普通數(shù)據(jù)的方式修改父組件對(duì)象，但是發(fā)現(xiàn)沒有效果，好像是reactive定義的響應(yīng)式數(shù)據(jù)，用v-model綁定后就被覆蓋成普通對(duì)象了，不知道是不是，望vue3大佬指教！

到此這篇關(guān)于vue3子組件如何修改父組件傳過來的props數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue3修改父組件傳的props數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: