VueJS：更改子组件内的数据并更新父组件的数据。答案

【问题标题】：VueJS: Change data within child component and update parent's data.VueJS：更改子组件内的数据并更新父组件的数据。
【发布时间】：2018-11-05 09:14:27
【问题描述】：

我将多个组件一起使用，以便可以重复使用。主组件执行 aJax 调用来获取一些数据，然后将这个 get 传递给另一个组件，然后再将这个数据传递给另一个组件。

<input-clone endpoint="/api/website/{{ $website->id }}/locations/{{ $location->slug }}/get-business-hours" name="businessHours">

    <div class="input-clone businessHours" slot-scope="{ data, add, remove, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, onDrop, setClass }">

        <business-hours :injected-data="hours" :injected-days="data.days[0]">

            <time-select :injected-data="hours.open_time" :key="'opentime' + hoursIndex">

            </time-select>

        </business-hours>

    </div>

</input-clone>

主要问题是input-clone 组件具有拖放功能，它可以让我在里面移动项目，当它移动它们时它会重新排列主数据对象，这当然会重新渲染子组件，因此子项中的任何数据更改都会被重置。

如何更新子元素的主要数据，这样当我重新排列元素时，它们不会丢失数据更改。

【问题讨论】：

你想要v-model。

标签： javascript vue.js

【解决方案1】：

您正在寻找 $emit。在子组件中，使用 $emit('updateData', payload) 将数据更改发送给父组件。然后你可以监听组件的更新，例如：

<business-hours @updateData="doSomething(payload)" :injected-data="hours" :injected-days="data.days[0]">

您可以使用 doSomething 方法通过组件的更改来更新您的主要数据。这样，当重新渲染组件时，它们将被保留。

【讨论】：

【解决方案2】：

不要先将数据更改为子组件，然后更新父组件，您应该做什么在父组件上发出有关子组件更改的事件并在父组件中设置状态，然后子组件将重新渲染那。通过这种方式，您可以维护父子组件的理念，即父应将数据传递给子组件，并且子组件会通知父组件任何更改。

您可以在这篇博文中了解更多信息 - https://medium.com/@sky790312/about-vue-2-parent-to-child-props-af3b5bb59829

【讨论】：

【解决方案3】：

为您的组件实现v-model。

来自Vue documentation：

但要使其真正起作用，组件内部必须：

将 value 属性绑定到 value prop

在输入时，使用新值发出自己的自定义输入事件

在代码中，这翻译为：

props: ['value']

在您的组件声明中，并调用

this.$emit('input', <something>)

更新值。

【讨论】：