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

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

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

前言

最近新項目用vue3搭建的，準備開始使用vue3的語法，從這篇開始記錄下vue3遇到的一些問題和一些語法的使用方法，以便于以后復習，也可能幫助到一些小伙伴。

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

使用v-mode語法，代替了vue2.x的.sync修飾符

父組件用ref() 定義一個普通數(shù)據(jù)為響應式變量，例 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')
    }
  }

相關vue3文檔

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

在vue2.x中，子組件雖然不能修改父組件傳過來的普通數(shù)據(jù)，但是可以直接操作復雜數(shù)據(jù)，但是vue3不行。目前我只能用類似vue2的語法來解決修改父組件對象數(shù)據(jù)的問題，如有哪位大佬有更好的辦法，還希望評論區(qū)指教?。?！

父組件reactive定義一個對象為響應式數(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')
    }
  }