javascript - Vue.js 在组件之间传递数据

Question

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

应用程序.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

Answer 1

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

1. 更高级的 vuex 商店应该是您的默认转到 - NPM .

2. 或者使用 js 对象的简单解决方案。

   a.创建 store.js 文件并导出带有将在其中存储值的属性的对象。

   b.将 store.js 对象导入到 vue 脚本并像下面这样简单地使用它:

import Store from 'store.js'

Store.value