在子组件之间传递数据 [英] Passing data between child components
问题描述
我正在努力使其工作.我需要从 FormComponent 访问 ChooseLangComponent 中的 selected 值.有没有直接的方法可以做到这一点，或者我们必须从父组件传递它(像中间人一样)?我已经尝试过在 ChooseLangComponent 上使用 $emit 和在 FormComponent 上使用 v-on:... 但没有奏效.
选择LangComponent:
<div class="choose-lang"><select v-model="selected"><option v-for="lang in langs" v-bind:value="lang.value">{{lang.text}}</option></选择></模板><脚本>导出默认{数据() {返回 {选择: 'en',语言:[{ text: 'English', value: 'en' },{文本:'德语'，值:'ge'}，]}}}
表单组件:
<div class="form-name"><div class="inputs"><input type="text" v-model="nameText" v-on:keyup.enter="send_name"></模板>导出默认{数据() {返回 {名称文本:'',}},方法: {发送名称(){//我需要这里选择的语言}}}
父组件:
<choose-lang></choose-lang>...<form-comp></form-comp>...Vue.component('choose-lang', require('./components/ChooseLangComponent.vue'));Vue.component('form-comp', require('./components/FormComponent.vue'));const app = new Vue({el: '#app',数据: {...});
好吧，如果您的应用规模很大，有 2 种简单的方法，另一种涉及 Vuex.
第一种方法是创建事件总线 - 想法是在一个集线器中发出事件，然后在需要的地方捕获它们.
const Bus = new Vue({})Vue.component('lang', {模板:'#lang-tmp'，数据() {返回 {选择: 'en',语言:[{ text: 'English', value: 'en' },{文本:'德语'，值:'ge'}，]}},创建(){this.changeLang()},方法: {更改语言(){Bus.$emit('langChanged', this.selected)}}})Vue.component('frm', {模板:'#frm-tmp'，数据() {返回 {selectedItem: 'zh'}},创建(){Bus.$on('langChanged', (selected) => {this.selectedItem = 选中})}})const app = new Vue({el: '#app'})http://jsbin.com/siyipuboki/edit?html,js,output
第二种方法是创建一种存储 - 将保存所选项目状态的普通对象
const store = {数据: {选择:空}}Vue.component('lang', {模板:'#lang-tmp'，数据() {返回 {选择: 'en',语言:[{ text: 'English', value: 'en' },{文本:'德语'，值:'ge'}，]}},创建(){this.changeLang()},方法: {更改语言(){store.data.selected = this.selected}}})Vue.component('frm', {模板:'#frm-tmp'，数据() {返回 {商店选择:store.data}}})const app = new Vue({el: '#app'})http://jsbin.com/qagahabile/edit?html,js,output
另外请检查这个 VueJS 从父组件访问子组件的数据
I am struggling for this to work. I need to access the selected value in the ChooseLangComponent from the FormComponent. Is there any direct way to do this or we have to pass it from the parent component (act like middle man)? I already tried with $emit on ChooseLangComponent and v-on:.. on FormComponent but didn't work.
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
}
}
}
The parent component:
<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: {
...
});
Okay there are 2 easy ways and one more which involves the Vuex, if your app is large scale.
First way is creating the Event Bus - idea is emitting Events in one hub and then catching them where It's needed.
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
Second way is creating sort of store - plain object that would hold the state of selected item
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
Also please check this VueJS access child component's data from parent
这篇关于在子组件之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
