在子组件之间传递数据

Question

我正在为此努力奋斗.我需要selected从FormComponent 访问ChooseLangComponent中的值.有没有直接的方法来做到这一点,或者我们必须从父组件传递它(像中间人一样)？我已经尝试使用$emitChooseLangComponent和v-on:..FormComponent,但没有工作.

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访问子组件的数据