Как получить значение из компонента Child другого Parent в Vue js?

1

У меня есть компонент A и он имеет 2 дочерних компонента C1 и C2. В компонент C1 есть функция, с помощью которой вы получаете данные из источника, такого же в C2. Для C1

<template>

</template>

<script>
export default {
  url = 'abc.com';
  name: 'c',
  data () {
    return {
    users:'',
  }},
  methods: {
    getData: function () {
    $.get(url, function( data ) {
        this.users = data;
        var ab = this.users.ab ;
        var pq = this.users.pq ;
        

     )};

}}
}
</script>

Для C2

<template>

</template>

<script>
export default {
  url = 'abc.com';
  name: 'c',
  data () {
    return {
    users:'',
  }},
  methods: {
    getData: function () {
    $.get(url, function( data ) {
        this.users = data;
        var cd = this.users.cd ;
        var rs = this.users.rs ;

     )};

}}
}
</script>

И у меня есть еще один компонент D

<template>

</template>

<script>
export default {
  data () {
    return {
  }},
  methods: {
    showDataABCD: function () {
    
      // here I want to access all data of users object of C1 and C2]
      // especially ab, cd


},
 showDataPQRS: function () {
    
      // here I want to access all data of users object of C1 and C2
      //especially PQ, RS


}

}

</script>

Внутри этого D-компонента мне нужно получить доступ к объектам этих двух компонентов. Могу ли я использовать состояние или любой другой способ?

Теги:
vue.js
vuejs2

2 ответа

1
Лучший ответ

Существует множество способов достижения вашей цели.

  • вы можете просто дать каждому дочернему компоненту "ref =..." и получить к ним доступ непосредственно от родителя. (предполагая, что A является дочерним числом D)
  • вы можете передать ответ HTTP-запросов в состояние
  • вы можете передать событие вверх родительскому компоненту с данными в качестве параметра и сохранить его (если A является дочерним по D)
  • вы можете использовать eventbus для передачи данных от детей родителям

Однако, если вы хотите инициировать поиск из компонента D, вы можете, в первую очередь, добавить пользовательский event-listener (eventbus. $ On...) на C1 и C2. (вы также можете передать функцию обратного вызова)

  • 0
    Нет, А является родителем ребенка С1 и С2
0

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

Просто передайте объекты, которые вы хотите использовать в качестве реквизита от родителя. Затем, когда дети испускают обновленные данные, пусть родитель устанавливает его, а поток данных доходит до его детей с "общим состоянием".

Данные будут передавать родительский → дочерний → дочернее обновление → родитель получает обновление → все дети обновлены.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню