vue 2 소품 정의 안 됨

vue 2 소품 정의 안 됨

도와주세요!어린이 템플릿에 '정의되지 않은' 소품들이 있습니다.

주 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>

이 .isActiveCalendar에 대해 console.log를 실행하면 변수가 정의되지 않고 Chrome용 Vue 플러그인에서도 마찬가지입니다.

제발, 내가 무슨 실수를 하고 있는지 말해줘요!

감사합니다!

패스 소품 설명서에 기재되어 있는 바와 같이

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>

변수 값을 프로펠러에 전달하도록 합니다.

언급URL : https://stackoverflow.com/questions/45760231/vue-2-props-undefined