我很努力工作。我需要从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: {
...
});
这样的事情呢? - http://jsbin.com/siyipuboki/edit?html,js输出 –