vue 2 道具未定义答案

【问题标题】：vue 2 props undefinedvue 2 道具未定义
【发布时间】：2018-01-27 08:26:26
【问题描述】：

请帮忙！我在子模板中有“未定义”的道具。

主要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 插件中也是如此。

请告诉我，我做错了什么！

谢谢！

【问题讨论】：

你如何使用这个接受这个道具的组件？
主要是从 isActiveCalendar 中获取价值。对于此模板中的 v-bind:class="{ active: isActiveCalendar}"
向我们展示您使用calendar_select.vue 的模板并将isActiveCalendar 传递给它。
传递 camelCase 属性的一个常见问题是 html 不区分大小写。您需要以连字符形式传递它<calendar-select v-bind:is-active-calendar="isActiveCalendar"></calendar-select>
贾斯汀麦克阿瑟，坦克很多！

标签： vue.js vuejs2 vue-component

【解决方案1】：

如documentation 中所述用于传递道具。

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

在这个例子中你需要使用

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

以便它将变量的值传递给道具。

【讨论】：