बाल घटकों के बीच डेटा पास करना

Question

मैं इस काम के लिए संघर्ष कर रहा हूं। मुझे FormComponent से SelectLangComponent में selected मान तक पहुंचने की आवश्यकता है। क्या ऐसा करने का कोई सीधा तरीका है या हमें इसे मूल घटक (मध्य व्यक्ति की तरह कार्य) से गुजरना है? मैंने पहले से ही FormComponent पर $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