在子組件之間傳遞數據

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，如果您的應用程序規模很大。

第一種方式是創建事件總線 - 想法是在一個集線器中發射事件，然後將它們捕捉到需要的地方。

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

第二種方式是創建店面的那種 - 普通對象，將舉行所選項目的狀態

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' 

}) 

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

同時請參閱本VueJS access child component's data from parent