Question

我正在一起使用多个组件，因此可以重复使用。主要组件执行aJax调用以获取一些数据，然后将此获取信息传递给另一个组件，然后再次将此数据传递给另一个组件。

<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'，payload）将数据更改发送给父组件。然后，您可以侦听组件的更新，例如：

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

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

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

Answer 2

为组件实施v-model。

来自Vue documentation：

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


将value属性绑定到值prop

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

在代码中，这表示为：

props: ['value']

在组件声明中，然后调用

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

更新值。

Answer 3

与其先将数据更改为子组件，然后再更新父组件，您应该在父组件上发出有关子组件更改的事件，然后在父组件中设置状态，然后子组件将通过以下方式重新呈现：那。通过这种方式，您可以保持父级子级组件的理念，即父级应该将数据传递给子级，并且子级将任何更改通知父级。

您可以在此博客文章中了解更多相关信息-Here is my debug img

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

3 个答案: