我创建了一个显示 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() 从不触发)我没有看到任何错误。我的代码有什么问题吗?谢谢。
最佳答案
由于 HTML 属性不区分大小写,因此模板中的事件名称应为短横线大小写,而不是驼峰式大小写。请参阅:https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
<period-component v-on:period-change-event="selectedPeriodChanged($event)"></period-component>
this.$emit('period-change-event', this.selectedPeriod);
这是一个工作 fiddle
关于javascript - 将数据从组件传递到父组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48893132/