Vue.js 在组件之间传递数据答案

【问题标题】：Vue.js passing data between componentsVue.js 在组件之间传递数据
【发布时间】：2020-03-05 00:21:28
【问题描述】：

我想存储来自 App.vue 的输入值，并在另一个组件中使用它。我该怎么做？我不需要在模板中显示值，我只需要其他组件函数中的值。在 JS 中我可以只使用全局变量，但如何在 Vue 中实现它？

App.vue：

<template>
  <div id='app'>
    <!-- App.vue has search bar -->
    <b-form-input @keydown='search' v-model='input'></b-form-input>
    <div>
      <!-- Here's my other components -->
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      input: '',
      value: ''
    }
  },
  methods: {
    search () {
      this.value = this.input
      this.input = ''
    }
  }
}
</script>

另一个组件：

<template>
  <div>
    <p>I'm another component</p>
    <p>App.vue input value was: {{value}} </p>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      value: ''
    }
  }
}
</script>

这是我试图实现的基本逻辑。 App.vue 中的输入值 --> anotherComponent.vue

【问题讨论】：

路由后面是 anotherComponent.vue 吗？
视情况而定，我们可以做到这一点的方法很少，1.如果是父子关系，则使用props 2.否则使用vuex store 3.如果涉及路由器，则使用路由器参数4 . 可以使用事件总线将您的值作为方法参数值传递并在另一端使用（事件总线不是为此场景构建的，不推荐......但可以使用）
另一个组件在我的路由器后面，我在“route/:name”中传递了“name”（即输入值），但我也在尝试存储 :name -value 可以说是一个变量。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

如果组件不是父子组件，您可以使用 store 来实现：

更高级的 vuex 商店应该是您的默认转到 - NPM。
或者使用js对象的简单解决方案。

一个。创建 store.js 文件并导出具有属性的对象，您将在其中存储值。

b.将 store.js 对象导入 vue 脚本并简单地使用它：

import Store from 'store.js'

Store.value

【讨论】：

谢谢！ Vuex 解决了我的问题！ this.$store.state.value = this.input