Vueコンポーネント：親から子へデータを渡す方法

Question

私の医者のコンポーネントからdoctor属性にアクセスするにはどうすればよいですか？

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

nullの親
のforループで:doctor="doctor"を渡すとする医師を追加

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: '', 
     } 
    } 
}); 

を子コンポーネントで小道具

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

[子コンポーネントからvuejs更新親データ（の