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

Question

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

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

所以，第一个示例只是一个简单的 Tab 组件，它要么将任何子组件分成选项卡，要么接受单个子组件然后呈现的一些数据。

所以下面我从另一个组件注入一些数据，这个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 更改来重新排列它们。

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

<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

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

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/