如何从vuejs中的另一个组件更新组件的数据属性？

Question

我有两个组件A＆amp; B，彼此不是孩子或父母。 A的数据为

export default {
    data() {
        return { 
           info1: 'info1'
        }
    }
}

现在我想从组件B更新此info1 proppoerty。 有可能吗？

Answer 1

您可以使用$ root和$ refs，将ref附加到两个组件，例如：

<component-a ref="compa"></component-a>
<component-b ref="compb"></component-b>

现在这里是重要的部分，您需要遵循每个组件的确切路径。例如，您想要访问B中的组件A，请使用

this.$root.$children[0].$refs.compa.info1

或者它将是

this.$root.$children[0].$children[0].$refs.compa.info1

或

this.$root.$children[0].$children[1].$refs.compa.info1

根据您的应用和组件相互关系。通过这种方式，您可以从组件A访问和更新info1。这是实现它的一种方法。

Answer 2

是的，这可能不止一种方式。我建议使用Vuex，因为当多个组件需要获取/更新值时，它会使事情变得更容易。

Vuex是一个用于状态管理的库，因此可以构建您想要实现的目标。它还使得在开发过程中检查值变得容易得多。