Vue.js передача данных между компонентами - PullRequest
Новая
       26

Vue.js передача данных между компонентами

0 голосов
/ 08 ноября 2019

Я хочу сохранить входное значение из 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

1 Ответ

0 голосов
/ 08 ноября 2019

Если компоненты не являются родительскими и дочерними, вы можете использовать хранилище для этого:

  1. Более расширенное vuex хранилище, которое должно быть вашим значением по умолчанию GO TO - NPM .

  2. Или простое решение с объектом js.

    a. Создайте файл store.js и экспортируйте объект со свойством, в котором вы будете хранить значение.

    b. Импортируйте объект store.js в сценарии Vue и используйте его просто так: 

import Store from 'store.js'

Store.value
...