VueJS:更改子组件中的数据并更新父组件的数据。

Question

我在一起使用多个组件，这样就可以被重用了。主组件执行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组件有一个拖放特性，它允许我在里面移动项目，当它移动它们时，它会重新排列主数据对象，这当然会重新呈现子组件，因此子组件中的任何数据更改都会被重置。

如何更新来自子元素的主数据，以便当我重新排列元素时，它们不会丢失数据更改。

Answer 1

你在找$emit。在子组件中，通过使用$emit('updateData'，有效负载)将数据更改发送给父组件。然后，您可以监听组件上的更新，例如：

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

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

更多信息在这里：https://v2.vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

Answer 2

与其先将数据更改为子组件，然后更新父组件，不如在父组件上发出关于子组件更改的事件，并在父组件中设置状态，然后子组件将按此重新呈现。通过这种方式，您可以维护父组件的理念，即父组件应该将数据传递给子组件，并将任何更改通知父组件。

你可以在这篇博文- https://medium.com/@sky790312/about-vue-2-parent-to-child-props-af3b5bb59829上读到更多关于它的信息。

Answer 3

为您的组件实现v-model。

来自Vue文档

但是，要使其实际工作，组件内部必须：

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

在代码中，这是指：

props: ['value']

在组件声明中，并调用

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

更新值。