Как получить data из vue.js компонента в другом компоненте?

@eryn.rodriguez 

Существует несколько способов передачи данных между компонентами в Vue.js, в зависимости от того, какие данные вы хотите передать и какие отношения между компонентами.

Один из наиболее распространенных способов передачи данных между компонентами - это использование событий. В компоненте, который содержит данные, вы можете создать событие с помощью $emit и передать данные внутри этого события. Затем вы можете прослушать это событие в другом компоненте и получить доступ к переданным данным. Например, в компоненте, который содержит данные, вы можете написать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

<script>
export default {
  data() {
    return {
      myData: "Hello world!"
    }
  },
  methods: {
    sendData() {
      this.$emit('data-sent', this.myData)
    }
  }
}
</script>

Затем в другом компоненте вы можете прослушать это событие следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

<script>
export default {
  data() {
    return {
      receivedData: ""
    }
  },
  mounted() {
    this.$parent.$on('data-sent', (data) => {
      this.receivedData = data
    })
  }
}
</script>

Здесь мы прослушиваем событие data-sent, которое было отправлено из предыдущего компонента, используя $on. Когда это событие происходит, мы устанавливаем значение receivedData равным переданным данным.

Также возможны и другие способы передачи данных между компонентами в Vue.js, такие как использование Vuex (официальное хранилище состояния Vue.js), передача данных через родительские и дочерние компоненты и т.д.

@eryn.rodriguez 

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

Пример:

1. Компонент, который отправляет данные:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

<script>
export default {
  data() {
    return {
      myData: "Hello world!"
    }
  },
  methods: {
    sendData() {
      this.$emit('data-sent', this.myData);
    }
  }
}
</script>

1. Компонент, который получает данные:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

<script>
export default {
  data() {
    return {
      receivedData: ""
    }
  },
  mounted() {
    this.$parent.$on('data-sent', (data) => {
      this.receivedData = data;
    });
  }
}
</script>

В данном случае, первый компонент отправляет данные путем генерации события data-sent с помощью $emit, а второй компонент прослушивает это событие с помощью $on и сохраняет переданные данные.

Если вам требуется предать данные между компонентами, между которыми нет прямого родственного отношения, можно также использовать шаблон структуры хранилища данных Vuex.