如何更改 Vue 中“App”组件中的数据？

Question

我在 Vue 中有 App 组件，它使用 <router-view> 扩展了 Login 组件。每当我单击 Login 组件中的按钮时，我想更改 App 组件中的一些数据。这在 Vue 中可能吗？

Answer 1

当您在组件之间共享数据时，您可能需要考虑使用 Vuex。

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

或者，您可以从子组件发出事件并在父组件中侦听它。

在App.vue模板中，

<router-view @updateParent="handleUpdate"></router-view>

在App.vue方法中，

handleUpdate: function (value) {
    this.parentData = value
}

在@click方法中Login.vue，

onButtonClick: function () {
    this.$emit('updateParent', "value")
}