Javascript VUEJ在组件之间共享数据

我有两个部分：

• App.vue
• Sidekick.vue

在我的

App.vue

组件中，我想从

Sidekick.vue

App.vue

<template>
  <div id="app">
    <p>{{ myData }}</p>
    <div class="sidebar">
      <router-view/> // our sidekick component is shown here
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      myData: 'is just this string'
    }
  }
}
</script>

<template>
  <div class="sidekick">
    {{ myData }}
  </div>
</template>

<script>
export default {
  name: 'Sidekick'
}
</script>

我读过关于道具的文章，但只看到了对子/父组件的引用。在我的例子中，

Sidekick.vue

显示在

App.vue

内的一个div中（不确定这是否使它成为“子项”）。我是否需要以某种方式将

myData

的访问权限授予

更新：（显示App.vue和Sidekick.vue之间的关系

<template>
  <div id="app">
    <p>{{ myData }}</p>
    <div class="sidebar">
      <router-view/> // our sidekick component is shown here
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      myData: 'is just this string'
    }
  }
}
</script>

<template>
  <div class="sidekick">
    {{ myData }}
  </div>
</template>

<script>
export default {
  name: 'Sidekick'
}
</script>

index.js（路由器文件）

---

Sidekick.vue

在我们点击

/Sidekick

时被渲染请记住，经验法则是使用道具以单向流传递数据

道具放下，活动开始。

快速解决方案：

在

长期解决方案：

使用状态管理库可以更好地将数据封装在一个位置（全局存储），并使用“vuex”中的
import{mapState，mapstations}从组件树中订阅数据。

当你有亲子沟通时，最好的建议是
选项是使用道具和事件


当想要在多个组件之间共享状态时，最好
推荐的方法是使用


如果您想使用简单的数据共享，您可以使用

简单示例：假设您有一个游戏，并且希望许多组件都可以访问错误。（组件可以访问并操纵它）

errors.js

组件1.vue

<template>
  <div id="app">
    <p>{{ myData }}</p>
    <div class="sidebar">
      <router-view/> // our sidekick component is shown here
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      myData: 'is just this string'
    }
  }
}
</script>

<template>
  <div class="sidekick">
    {{ myData }}
  </div>
</template>

<script>
export default {
  name: 'Sidekick'
}
</script>

在
Component1
中，
errors.count
是被动的。因此，如果作为模板，您有：

<template>
  <div>
    Errors: {{ errors }} 
    <button @click="errors++">Increase</button>
  </div>
</template>


错误：{{Errors}}
增加

单击“增加”按钮时，您将看到错误增加


正如您所料，当您在另一个组件中导入
errors.js
时，两个组件都可以参与操作
errors.count


注意：即使您可能使用Vue.observable API进行简单的数据共享，您也应该知道这是一个非常强大的API。例如，read
App.Vue:


“DUKIK.VUE显示在DIV内部应用程序。VUE”，你的副手在哪里，我不能在App的模板上看到它们，除了路由视图，我假设 PROPS是正确的方式去只想更多的上下文：）数据从父到子共享，你应该考虑使用道具。如果您有多个嵌套组件，并且在所有这些组件之间传递相同的PROP值，或者您试图从儿童到父或兄弟姐妹之间共享数据，那么您可能需要考虑查看<代码> Vuex < /代码>。我个人并不使用Vuex，但我目前处理的Vue应用程序不够复杂，无法保证它的使用。由于您似乎正在开发一个SPA，您可能会发现使用它会带来一些好处。@Xlee的可能副本我已经用“App”和“Sidekick”之间的关系更新了原始问题，另请参见
<router-view pass_data='myData'/>

export default {
  name: "Sidekick",
  props: ["pass_data"],
  created() {
    alert("pass_data: "+this.pass_data)
  }
}