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

Question

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

Answer 1

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

  

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。

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

在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")
}