鍍金池/ 問答/HTML/ vue子組件變化時(shí)數(shù)據(jù)同步到父組件

vue子組件變化時(shí)數(shù)據(jù)同步到父組件

目前在做一個(gè)多圖文編輯功能,頁面以(圖片上傳按鈕 + 文本域)作為一個(gè)圖文塊子組件,用戶可以對這個(gè)圖文塊進(jìn)行內(nèi)容編輯、增加圖文塊、刪除圖文塊。
以下是子組件:

<div class="custom-block">
    <div class="custom-img-block">
        <img :src="image"/>
    </div>
    <div class="text-edit-block">
        <textarea placeholder="編輯正文...">{{text}}</textarea>
    </div>
</div>

以下是父組件

 <div class="custom-content-container">
    <span v-for="(item,index) in form.custom_contents" :key="index">
        <customer-block :image="item.image" :text="item.text" ></customer-block>
    </span>
</div>

data(){
    form:{
        custom_contents:[
            {
                image:'',
                text:''
            }
        ],
        ...
    },
    ...
}

我現(xiàn)在改變子組件的內(nèi)容(如文本域內(nèi)容),父組件的form->custom_contents的數(shù)據(jù)是不會(huì)改變的。
但是我在想是不是一定要跟子組件同步,還是說最終提交的時(shí)候再去遍歷子組件獲取數(shù)據(jù)(這好像就不是數(shù)據(jù)驅(qū)動(dòng)了)?這里有點(diǎn)想不通,能同步當(dāng)然是最好了,最后把form直接提交接口就行了。但是如果同步的話,應(yīng)該如何辨別$emit上來的是哪個(gè)子組件實(shí)例呢?請各位大牛幫忙分析下吧!感謝!

回答
編輯回答
吢丕

可以用 :text.sync="item.text",這樣子組件可以直接修改數(shù)據(jù)。參考文檔。

或者你可以使用事件,@change="update(item, $event)",然后把修改后的數(shù)據(jù)以對象形式提交:this.$emit('change', {text: 'xxx', image: 'abc.jpg'})

2018年6月30日 04:47
編輯回答
無標(biāo)題

在 vue 里做了限制,在子組件中修改父組件的值雖然可以運(yùn)行,但是會(huì)報(bào)錯(cuò)提示,因?yàn)椴煌扑]這么做。但是封裝組件或者其他一些場景的話其實(shí)子組件改變父組件的值是很常用的。

可以參考 emelemt 中的做法,用 v-module 去綁定值,我這里有一篇博客里面有詳細(xì)代碼,可以看一下。

博客

2018年1月5日 22:16
編輯回答
風(fēng)清揚(yáng)

跟@Meathill 的方案類似,建議使用一個(gè)簡單的bus組件,子組件提交更改,父組件接受并更改數(shù)據(jù)
https://div.io/topic/1864

2017年10月18日 06:02