在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

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

回答
編輯回答
吢丕

可以用 :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
編輯回答
無標題

在 vue 里做了限制,在子組件中修改父組件的值雖然可以運行,但是會報錯提示,因為不推薦這么做。但是封裝組件或者其他一些場景的話其實子組件改變父組件的值是很常用的。

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

博客

2018年1月5日 22:16
編輯回答
風清揚

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

2017年10月18日 06:02