Question

我正在为此努力奋斗。我需要从FormComponent访问ChooseLangComponent中的selected值。有没有直接的方法来做到这一点，或者我们必须从父组件传递它（像中间人一样）？我已经在FormComponent上的ChooseLangComponent和$emit上尝试了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

如果你的应用程序规模很大，那么有两种简单的方法和一种涉及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

在子组件之间传递数据

1 个答案: