javascript - 组件内的Vue.js组件，操作父数据

Question

我看到一些答案可以回答我的问题，但并不完全，所以让我解释一下我想要做什么。

我们在网站布局中使用全局 #app div，这是一个 Laravel 项目。因此，所有页面都将是相同的主 Vue 实例，因此我将关键功能分离到组件中。

因此，第一个示例只是一个简单的选项卡组件，它将所有子组件分隔为选项卡，或者接受单个子组件然后呈现的一些数据。

所以下面我从另一个组件注入(inject)一些数据，这个ajax组件实际上只是执行一个ajax调用，并使数据在它的槽中可用。

<ajax endpoint="/api/website/{{ $website->id }}/locations/{{ $location->slug }}/get-addresses">
    <div>
        <tabs :injected="data">
            <div>
                <div v-for="row in data">
                    @{{ row['example' }}
                </div>
            </div>
        </tabs>
    </div>
</ajax>

现在，在某种程度上，这一切都很好，但是下面的代码却失败了。它包含一个允许用户拖放元素的组件，它通过移动数据并让 Vue 处理 DOM 更改来重新排列它们。

这当然可以在您注入(inject)的自己的数据中正常工作，但是当您更改下面的组件内的数据时，则会清除该子组件。

<ajax endpoint="/api/website/{{ $website->id }}/locations/{{ $location->slug }}/get-addresses">
    <div>
        <tabs :injected="data">
            <div>
                <div v-for="row in data">
                    <draggable :injected="row">
                        <div>
                            <div v-for="item">
                                @{{ item }}
                            </div>
                        </div>
                    </draggable>
                </div>
            </div>
        </tabs>
    </div>
</ajax>

我需要找到一种方法来将此数据的任何更改应用于父数据，而不是传递到子组件的数据。

执行此操作的最佳做​​法是什么!？

<小时/>

编辑 1

基本上，我需要任何子组件来操作 ajax 组件内的数据。 ajax 中的子级可能会发生变化，或者可能会有更多，所以我只需要它们全部执行此操作，而无需知道它们的顺序或位置。

Answer 1

很难给出这个问题的具体细节，但我会尽力为您指明正确的方向。组件之间共享数据的方式有3种。

1) 通过 props 传递数据，通过自定义事件向上发送数据

通过 props 传递数据是父组件和子组件之间的单向街道。重新渲染父组件也会重新渲染子组件，并且数据将重置为原始状态。请参阅VueJS: Change data within child component and update parent's data.

2) 使用全局事件总线

在这里，您创建一个事件总线并使用它来将数据发送到不同的组件。所有组件都可以从事件总线订阅更新并相应地更新其本地状态。您启动一个事件总线，如下所示:

import Vue from 'vue';
export const EventBus = new Vue();

您发送这样的事件:

import { EventBus } from './eventbus.js'
EventBus.$emit('myAwsomeEvent', payload)

您订阅这样的事件:

import { EventBus } from './eventbus.js'
EventBus.$on('myAwsomeEvent', () => {
  console.log('event received)
})

您仍然需要单独管理组件中的状态。这是事件总线的良好开端:https://alligator.io/vuejs/global-event-bus/

3)使用Vuex

使用 Vuex 将组件状态提取到 Vuex 存储中。在这里，您可以存储全局状态并通过提交突变来改变该状态。您甚至可以使用操作异步执行此操作。我认为这就是您所需要的，因为您的全局状态对于您可能使用的任何组件都是外部的。

export const state = () => ({
    resultOfAjaxCall: {}
})

export const mutations = {
    updateAjax (state, payload) {
        state.resultOfAjaxCall = payload
    }
}

export const actions= {
    callAjax ({commit}) {
        const ajax = awaitAjax
        commit('updateAjax', ajax)
    }
}

使用 vuex，您可以将 ajax 结果与组件结构分开。然后，您可以使用 ajax 结果填充您的状态，并改变各个组件的状态。这样，无论您调用 ajax 还是销毁组件都无关紧要，因为状态将始终存在。我想这就是你所需要的。有关 Vuex 的更多信息:https://vuex.vuejs.org/