Компонент Vue: как передать данные от родителя к ребенку

Question

Как я могу получить доступ к атрибуту врача из моего компонента врача?

Vue.component('specialists', { 
    template: ` 
    <div> 
     <div class="list-group-item title"> 
      &raquo; {{ name }} 
     </div> 
     <doctor class="list-group-item" v-for="doctor in doctors"> 
      <a href="#" class="list-group-item-heading"> 
       {{ doctor.full_name }} 
      </a> 
     </doctor> 
    </div> 
    `, 

    props: { 
     name: { 
      default: '', 
     }, 
    }, 

    data: function() { 
     return { 
      algoliaClient: null, 
      algoliaIndex: null, 
      doctors: [], 
     }; 
    }, 

    created: function() { 
     this.algoliaClient = this.$parent.algoliaClient; 
     this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors'); 
    }, 

    mounted: function() { 
     this.getDoctors(); 
    }, 

    methods: { 
     getDoctors: function() { 
      this.search(this.name); 
     }, 

     search: function(input) { 
      var _this = this; 
      this.algoliaIndex.search(this.name, function(err, hits) { 
       _this.setDoctors(hits.hits); 
      }); 
     }, 

     setDoctors: function(data) { 
      this.doctors = data; 
     }, 
    }, 
}); 

// my doctor component 
Vue.component('doctor', { 
    template: ` 
     <div><slot></slot></div> 
    `, 

    data: function() { 
     return { 
      doctor: null, // here. how can i pass value to it? 
     }; 
    }, 
}); 

Как я могу получить доступ к атрибуту врача из моего компонента специалистов? Я пытался получить доступ к this.$children от компонента специалистов, но ребенок является нулевым

Answer 1

Я хотел бы попробовать что-то вроде этого:

Vue.component('specialists', { 
    template: ` 
    <div> 
     <div class="list-group-item title"> 
      &raquo; {{ name }} 
     </div> 
     <doctor class="list-group-item" v-for="doctor in doctors" :doctor="doctor"> 
      <a href="#" class="list-group-item-heading"> 
       {{ doctor.full_name }} 
      </a> 
     </doctor> 
    </div> 
    `, 

    props: { 
     name: { 
      default: '', 
     }, 
    }, 

    data: function() { 
     return { 
      algoliaClient: null, 
      algoliaIndex: null, 
      doctors: [], 
     }; 
    }, 

    created: function() { 
     this.algoliaClient = this.$parent.algoliaClient; 
     this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors'); 
    }, 

    mounted: function() { 
     this.getDoctors(); 
    }, 

    methods: { 
     getDoctors: function() { 
      this.search(this.name); 
     }, 

     search: function(input) { 
      var _this = this; 
      this.algoliaIndex.search(this.name, function(err, hits) { 
       _this.setDoctors(hits.hits); 
      }); 
     }, 

     setDoctors: function(data) { 
      this.doctors = data; 
     }, 
    }, 
}); 

// my doctor component 
Vue.component('doctor', { 
    template: ` 
     <div><slot></slot></div> 
    `, 

    props: { 
     doctor: { 
      default: '', 
     } 
    } 
}); 

проходя :doctor="doctor" в цикл родителя
и добавление врача к реквизит в компоненте детского

props: { 
    doctor: { 
     default: '', 
    }, 
},