子コンポーネント間でデータを渡す

Question

私はこれがうまくいくために苦労しています。 FormComponentからChooseLangComponentのselected値にアクセスする必要があります。これを行う直接的な方法はありますか、それとも親コンポーネント（中間の人間のような行為）から渡す必要がありますか？私はすでにChooseLangComponentの$emitとFormComponentのv-on:..を試しましたが、うまくいきませんでした。

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 
     } 
    } 
} 

親コンポーネント：

<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の簡単な方法とがあるオーケーあなたのアプリならば、Vuexを含み、1以上大規模です。

最初の方法はイベントバスを作成することです。イベントは1つのハブにイベントを送信してから、必要な場所にイベントをキャッチします。

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

第二の方法は、店舗の一種作成された - また、このVueJS access child component's data from parent