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

Пользователь

от eryn.rodriguez , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от richard , год назад

@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), передача данных через родительские и дочерние компоненты и т.д.

Пользователь

от rodger.botsford , 18 дней назад

@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.