Tôi đang vật lộn vì điều này để hoạt động. Tôi cần truy cập giá trị selected
trong phần tử SelectLangComponent từ FormComponent. Có cách nào trực tiếp để làm điều này hay chúng ta phải vượt qua nó từ thành phần cha mẹ (hành động như người trung gian)? Tôi đã thử với $emit
trên ChooseLangComponent và v-on:..
trên FormComponent nhưng không hoạt động.Truyền dữ liệu giữa các thành phần con
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
}
}
}
Các thành phần cha mẹ:
<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: {
...
});
Thế còn cái gì như thế này - http://jsbin.com/siyipuboki/edit?html,js,output –