Question

我想存储来自App.vue的输入值，并在另一个组件中使用它。我该怎么做？我不需要在模板中显示值，我只需要其他组件函数内部的值即可。在JS中，我可以只使用全局var，但是如何在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

Answer 1

如果组件不是父母和孩子，则可以使用store：

更高级的vuex存储区，应将其作为默认的 GO TO -NPM。
或者是带有js对象的简单解决方案。

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

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

import Store from 'store.js'

Store.value

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

1 个答案: