1）通过道具传递数据，通过自定义事件传递数据

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）通过道具传递数据，通过自定义事件传递数据

通过道具传递数据是父级和子级组件之间的一条单向路。渲染父组件也将重新渲染子组件，并且数据将重置为原始状态。参见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)
})

您仍然需要分别管理组件中的状态。这是使用Event总线的良好起点：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/

组件中的Vue.js组件，可处理父数据

1 个答案:

1）通过道具传递数据，通过自定义事件传递数据

2）使用全局事件总线

3）使用Vuex