하위 구성 요소 간에 데이터 전달

하위 구성 요소 간에 데이터 전달

이게 먹히려고 안간힘을 쓰고 있어요.액세스 할 필요가 있습니다.selectedChooseLang Component 값은 Form Component의 ChoiceLang Component입니다.이를 위한 직접적인 방법이 있습니까?아니면 부모 컴포넌트(중간인처럼 행동)에서 전달해야 합니까?나는 이미 로 시도했습니다.$emitChooseLangComponent 및v-on:..Form Component에 표시되었지만 작동하지 않았습니다.

[ Lang Component ]를 선택합니다.

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

폼 컴포넌트:

<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: {
    ...
});

네, 앱이 대규모인 경우 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

또한 이 VueJ가 상위 구성 요소의 데이터에 액세스하는지 확인하십시오.

언급URL : https://stackoverflow.com/questions/43155274/passing-data-between-child-components