Javascript VueJS：更改子组件内的数据并更新父组件'；s数据。

我同时使用多个组件，这样就可以重复使用。主组件执行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

从：

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

• 将值属性绑定到值属性
• 在输入时，使用新值发出自己的自定义输入事件

在代码中，这可以翻译为：

props: ['value']

在组件声明中，调用

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

this.$emit（'input'，）

---

更新值。

为您的组件实施

v-model

从：

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

• 将值属性绑定到值属性
• 在输入时，使用新值发出自己的自定义输入事件

在代码中，这可以翻译为：

props: ['value']

在组件声明中，调用

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

this.$emit（'input'，）

---

更新值。

您正在查找$emit。在子组件中，使用$emit（'updateData'，payload）将数据更改发送到父组件。然后，您可以监听组件上的更新，例如：

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

您可以使用doSomething方法使用组件的更改更新主数据。这样，当组件重新招标时，它们将被保留

更多信息请点击此处：

---

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

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

您可以使用doSomething方法使用组件的更改更新主数据。这样，当组件重新招标时，它们将被保留

更多信息请点击此处：

---

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

---

您可以在这篇博文中了解更多信息-

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

你可以在这篇博文中阅读更多关于它的信息-

你想要的。你想要的。