Vue 2中的props未定义问题

Question

请帮忙！我在子模板中有'undefined'属性。

主JS文件：

// some code before
window.Vue = require('vue');
import EventBus from '../components/event-bus';
// some code after

Vue.component('calendar-select', require('../components/admin/calendar_select.vue'));

const app = new Vue({
    el: '#app',
    data: function() {
        return {
            isActiveCalendar: true
        }
    },
    methods: {
        toggleCalendar() {
            this.isActiveCalendar = !this.isActiveCalendar;
        }
    },
    mounted() {
        EventBus.$on('toggleCalendar', this.toggleCalendar);
    }
});

在此之后，我创建了如下模板：

<template>
        <div class="custom-select" v-bind:class="{ active: isActiveCalendar}" >
            <div class="box flex" v-on:click="toggleCalendar" >
                <span>Calendar</span>
                <img src="/assets/img/admin/arrow-down.png" alt="#">
            </div>
        </div>
    </div>
</template>

<script>
import EventBus from '../event-bus';
export default 
{
// ------- start
    props: ['isActiveCalendar'],
    data: function() {
        return {
        }
    },
    methods: {
        toggleCalendar: function(event) {
            console.log(this.isActiveCalendar)
            EventBus.$emit('toggleCalendar');
        }
    }
// ------- end
}
</script>

当我在this.isActiveCalendar上使用console.log时，这个变量是未定义的，在Chrome的Vue插件中也是同样的情况。请告诉我，我错在哪里了！谢谢！

- KoGoro

---

这个组件接受这个属性，你如何使用它？ - dfsq

它的主要作用是从isActiveCalendar获取值。在这个模板中，v-bind:class="{ active: isActiveCalendar}"。 - KoGoro

请展示您使用 calendar_select.vue 的模板，并将 isActiveCalendar 传递给它。 - Eric Guan

传递camelCase属性的常见问题是HTML不区分大小写。您需要以连字符形式传递它：<calendar-select v-bind:is-active-calendar="isActiveCalendar"></calendar-select>。 - Justin MacArthur

贾斯汀·麦克阿瑟，非常感谢！ - KoGoro

Answer 1

依据传递props的文档，HTML属性是大小写不敏感的，所以在使用非字符串模板时，驼峰式(prop)名称需使用短横线分隔的等效形式(即kebab-case)：

在此示例中，您需要使用：

<calendar-select v-bind:is-active-calendar="isActiveCalendar"></calendar-sele‌​ct>

这样就可以将变量的值传递到属性中。

- Justin MacArthur