使用主js中定义的变量在两个vue文件之间共享数据

Question

我有两个单独的vue文件： - 例如1.vue和2.vue以及一个主要的js文件。

我在window.App数据：main.js中的方法下有一个变量xyz

我想将此变量作为共享数据变量访问，我将如何在我的两个vue文件中使用它。例如，1.vue将在此变量下放置一些数据，2.vue将访问此数据。

Answer 1

根据documentation

如果需要将数据从组件传递到另一个组件。您应该在子组件中使用props，并在父组件中使用v-bind或：。

父视图：

<child-component :datas="array"></child-component>
<script>
export default {
  data: () => ({
    array: [1,2,3]
  })
</script>

儿童视图：

<div v-for="item in array"></div>

<script>
export default {
  props: {
    array: Array // Array is the typeof (can be Object, Array or String)
  }
</script>

PS：让我觉得有点困难。

编辑：或者您可以使用mixin类来创建和更新变量

Answer 2

在组件之间传递数据有两种推荐方法（例如1.vue和2.vue）

1. 使用道具和事件。您在根实例数据中定义了xyz。使用1.vue中声明的组件时，将该值作为prop（property）传递，并将其作为值添加为1.vue中的prop。当值在1.vue中更改时，触发更新根实例中的值的事件，以便2.vue也可以通过prop看到此值。
2. 使用vuex。 Vuex创建一个共享状态，所有组件都可以通过商店查看。您可以通过突变和操作更新值，其他组件将使用计算自动对这些更改做出反应。