Alt öğeler arasında veri aktarımı

Question

Bunun için çalışıyorum. FormComponent öğesinden SelectLangComponent öğesinde selected değerine erişmem gerekiyor. Bunu yapmak için doğrudan bir yol var mı yoksa ana bileşenden mi geçmek gerekiyor (orta adam gibi davranmak)? FormLoPonent'te $emit ve FormComponent üzerinde v-on:.. ile çalıştım ancak çalışmadı.

ChooseLangComponent:

<template lang="html"> 
    <div class="choose-lang"> 
     <select v-model="selected"> 
      <option v-for="lang in langs" v-bind:value="lang.value">{{lang.text}}</option> 
     </select> 
    </div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       selected: 'en', 
       langs: [ 
        { text: 'English', value: 'en' }, 
        { text: 'German', value: 'ge' }, 
       ] 
      } 
     } 
    } 
</script> 

FormComponent:

<template lang="html"> 
    <div class="form-name"> 
     <div class="inputs"> 
      <input type="text" v-model="nameText" v-on:keyup.enter="send_name"> 
     </div> 
    </div> 
</template> 

export default { 
    data() { 
     return { 
      nameText: '', 
     } 
    }, 
    methods: { 
     send_name() { 
       // I need the selected language here 
     } 
    } 
} 

ebeveyn bileşeni:

<div id="app"> 
    <choose-lang></choose-lang> 
    ... 
    <form-comp></form-comp> 
</div> 

... 
Vue.component('choose-lang', require('./components/ChooseLangComponent.vue')); 
Vue.component('form-comp', require('./components/FormComponent.vue')); 

const app = new Vue({ 
el: '#app', 
data: { 
    ... 
}); 

Answer 1

2 kolay yolu ve orada Tamam uygulamanızda eğer Vuex içerir tane daha büyük ölçeklidir.

İlk yol Etkinlik Veri Yolu'nu oluşturuyor - fikir bir merkezde Etkinlikler yayıyor ve ardından ihtiyaç duyulan yerlerde onları yakalıyor.

const Bus = new Vue({}) 

Vue.component('lang', { 
     template: '#lang-tmp', 
     data() { 
      return { 
       selected: 'en', 
       langs: [ 
        { text: 'English', value: 'en' }, 
        { text: 'German', value: 'ge' }, 
       ] 
      } 
     }, 
     created() { 
      this.changeLang() 
     }, 
     methods: { 
      changeLang() { 
      Bus.$emit('langChanged', this.selected) 
      } 
     } 
}) 

Vue.component('frm', { 
    template: '#frm-tmp', 
    data() { 
    return { 
     selectedItem: 'en' 
    } 
    }, 
    created() { 
    Bus.$on('langChanged', (selected) => { 
     this.selectedItem = selected 
    }) 
    } 
}) 

const app = new Vue({ 

    el: '#app' 

}) 

http://jsbin.com/siyipuboki/edit?html,js,output

mağazanın tür yaratıyor

İkinci yolu - Seçili öğenin durumunu yapacağını düz nesneyi

const store = { 
    data: { 
    selected: null 
    } 
} 

Vue.component('lang', { 
     template: '#lang-tmp', 
     data() { 
      return { 
       selected: 'en', 
       langs: [ 
        { text: 'English', value: 'en' }, 
        { text: 'German', value: 'ge' }, 
       ] 
      } 
     }, 
     created() { 
      this.changeLang() 
     }, 
     methods: { 
      changeLang() { 
      store.data.selected = this.selected 
      } 
     } 
}) 

Vue.component('frm', { 
    template: '#frm-tmp', 
    data() { 
    return { 
     storeSelected: store.data 
    } 
    } 
}) 

const app = new Vue({ 

    el: '#app' 

}) 

Ayrıca

http://jsbin.com/qagahabile/edit?html,js,output

bu VueJS access child component's data from parent