将数据从组件传递给父级

Posted 2023-02-22

【中文标题】将数据从组件传递给父级

【英文标题】：Passing data from Component to parent

【发布时间】：2018-07-31 06:43:01

【问题描述】：

我创建了一个显示 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() 永远不会触发）我没有看到任何错误。我的代码有什么问题？谢谢。

【问题讨论】：

试试v-on:periodChangedEvent="selectedPeriodChanged"。如果这不能解决问题，请执行此操作并使用 kebab 大小写而不是 camelCase (period-changed-event) 作为事件名称。

解决了这个问题。谢谢。

【参考方案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