[英]Passing data from Component to parent
我创建了一个显示 SELECT 标记的简单组件。 在进行选择时,我想将所选值传递给父级(Vue)。 这是组件代码:
// Period Selection
Vue.component ('period-component', {
props: [],
data () {
return {
periods: [
{ text: '-- Select --', value: ''},
{ text: 'Today', value: 'Today'},
{ text: 'Up to Last 7 Days', value: '7D'},
{ text: 'Up to Last 30 Days', value: '30D'},
{ text: 'Up to 3 Months', value: '3M'},
{ text: 'Up to 6 Months', value: '6M'},
{ text: 'Up to 1 Year', value: '1Y'},
{ text: 'All', value: '1Y'},
],
selectedPeriod:false,
}
},
methods: {
periodChanged() {
console.log('In periodChanged.' ,this.selectedPeriod);
this.$emit('periodChangedEvent', this.selectedPeriod);
},
},
template: `<div>
<select
v-model="selectedPeriod"
v-on:change="periodChanged()">
<option
v-for="period in periods"
:value="period.value">{{ period.text }}
</option>
</select>
</div> `
})
我以下列方式使用该组件:
<period-component
v-on:periodChangedEvent="selectedPeriodChanged($event)" >
</period-component>
在 vue 对象中,我有这样的 selectedPeriodChanged() 方法。
selectedPeriodChanged: function(value){
console.log('in periodChanged' );
},
当我在 中进行选择时, periodChanged() 方法会触发,并且我在组件的selectedPeriod中获得所选值。 但是,我无法将事件发送给父级。 (父母的 selectedPeriodChanged() 永远不会触发)我没有看到任何错误。 我的代码有什么问题? 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.