У меня есть два отдельных файла vue: - например, 1.vue и 2.vue и основной файл js.

У меня есть переменная xyz в разделе window.App data: method в main.js

Я хочу получить доступ к этой переменной как к переменной общих данных, как я буду использовать ее в своих обоих файлах vue. например, 1.vue поместит некоторые данные в эту переменную, а 2.vue получит доступ к этим данным.

1
JustStartedProgramming 3 Янв 2018 в 17:33

2 ответа

Лучший ответ

Согласно документации

Если вам нужно передать данные от одного компонента к другому. Вы должны использовать props в дочернем компоненте и v-bind или: в родительском компоненте.

Родительский Vue:

<child-component :datas="array"></child-component>
<script>
export default {
  data: () => ({
    array: [1,2,3]
  })
</script>

Дочерний Vue:

<div v-for="item in array"></div>

<script>
export default {
  props: {
    array: Array // Array is the typeof (can be Object, Array or String)
  }
</script>

PS: Мне было немного сложно заставить его работать.

Изменить: Или, может быть, вы можете использовать класс mixin для создания и обновления переменная

0
Sandwell 3 Янв 2018 в 14:47

Есть два рекомендуемых способа передачи данных между компонентами (например, 1.vue и 2.vue).

  1. Использование реквизита и событий. У вас есть xyz, определенный в данных корневого экземпляра. При использовании компонента, объявленного в 1.vue, передайте значение как свойство (свойство) и добавьте его как значение как свойство в 1.vue. Когда значение изменяется в 1.vue, запускайте событие, которое обновляет значение в корневом экземпляре, чтобы 2.vue также мог видеть это значение через свойство.

  2. Используйте vuex. Vuex создает общее состояние, которое все компоненты могут видеть через магазин. Вы обновляете значение посредством мутаций и действий, а другие компоненты будут автоматически реагировать на эти изменения, используя вычисления.

1
James Westgate 3 Янв 2018 в 16:32