Question

我创建了一个显示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（）从不开火）我没有看到任何错误。我的代码有什么问题？谢谢。

Answer 1

由于HTML属性不区分大小写，因此事件名称应该是模板中的kebab-case而不是camelCase。请参阅：https://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

将数据从Component传递给父级

1 个答案: