vue子组件变化时数据同步到父组件

Question

目前在做一个多图文编辑功能，页面以（图片上传按钮 + 文本域）作为一个图文块子组件，用户可以对这个图文块进行内容编辑、增加图文块、删除图文块。
以下是子组件：

<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:''
            }
        ],
        ...
    },
    ...
}

我现在改变子组件的内容（如文本域内容），父组件的form->custom_contents的数据是不会改变的。
但是我在想是不是一定要跟子组件同步，还是说最终提交的时候再去遍历子组件获取数据（这好像就不是数据驱动了）？这里有点想不通，能同步当然是最好了，最后把form直接提交接口就行了。但是如果同步的话，应该如何辨别$emit上来的是哪个子组件实例呢？请各位大牛帮忙分析下吧！感谢！

Answer 1

可以用 :text.sync="item.text"，这样子组件可以直接修改数据。参考文档。

或者你可以使用事件，@change="update(item, $event)"，然后把修改后的数据以对象形式提交：this.$emit('change', {text: 'xxx', image: 'abc.jpg'})。

Answer 2

跟@Meathill 的方案类似，建议使用一个简单的bus组件，子组件提交更改，父组件接受并更改数据
https://div.io/topic/1864

Answer 3

在 vue 里做了限制，在子组件中修改父组件的值虽然可以运行，但是会报错提示，因为不推荐这么做。但是封装组件或者其他一些场景的话其实子组件改变父组件的值是很常用的。

可以参考 emelemt 中的做法，用 v-module 去绑定值，我这里有一篇博客里面有详细代码，可以看一下。

博客