Как передать значение переменной между двумя компонентами VUE?

В Vue.js существует несколько способов передачи значений между компонентами. Рассмотрим несколько наиболее распространенных подходов.

1. Использование Props:
Props (свойства) представляют собой механизм передачи данных от родительского компонента к дочернему компоненту. Данные передаются через атрибуты в HTML-шаблоне родительского компонента и затем принимаются в дочернем компоненте с использованием синтаксиса Props. Вот пример:

Родительский компонент:

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

Дочерний компонент:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

В данном примере переменная parentMessage передается в дочерний компонент ChildComponent с помощью атрибута :message. В дочернем компоненте переменная message принимается с помощью Props и отображается в шаблоне.

2. Использование Event Bus:
Event Bus (event-шина) представляет собой глобальный экземпляр Vue, который может использоваться для передачи событий и данных между компонентами, не имеющими прямой родительский-дочерний отношения. Для использования Event Bus следует создать новый экземпляр Vue:

eventBus.js:

import Vue from 'vue';
export default new Vue();

Затем данный экземпляр можно использовать в компонентах для передачи и прослушивания событий. Вот пример:

Первый компонент:

<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
import eventBus from './eventBus.js';

export default {
  methods: {
    sendData() {
      eventBus.$emit('DataSent', 'Hello from first component');
    }
  }
}
</script>

Второй компонент:

<template>
  <div>
    <p>{{ receivedData }}</p>
  </div>
</template>

<script>
import eventBus from './eventBus.js';

export default {
  data() {
    return {
      receivedData: ''
    }
  },
  created() {
    eventBus.$on('DataSent', (data) => {
      this.receivedData = data;
    });
  }
}
</script>

В данном примере первый компонент генерирует событие DataSent, при клике на кнопку, и передает ему данные 'Hello from first component'. Второй компонент слушает событие DataSent, используя метод created, и обновляет переменную receivedData при получении данных.

3. Использование Vuex:
Vuex - это паттерн управления состоянием приложения и библиотека для Vue.js. Она позволяет хранить данные в центральном хранилище и обеспечивает механизм для изменения и доступа к этим данным из разных компонентов. Для использования Vuex следует создать хранилище Vuex и зарегистрировать его в главном Vue экземпляре:

store.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedValue: 'Hello from Vuex'
  },
  mutations: {
    updateSharedValue(state, payload) {
      state.sharedValue = payload;
    }
  }
});

Затем, данный экземпляр можно использовать в компонентах для доступа к данным и их изменения. Вот пример:

Первый компонент:

<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$store.commit('updateSharedValue', 'Hello from first component');
    }
  }
}
</script>

Второй компонент:

<template>
  <div>
    <p>{{ receivedData }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    receivedData() {
      return this.$store.state.sharedValue;
    }
  }
}
</script>

В данном примере первый компонент вызывает мутацию updateSharedValue и передает ей данные 'Hello from first component'. Второй компонент использует состояние sharedValue из хранилища Vuex с помощью вычисляемого свойства.

Это лишь несколько примеров способов передачи значений между компонентами в Vue.js. Выбор конкретного подхода зависит от требований вашего проекта и его архитектуры.