Vue 2自定义组件valus总是“未定义”。

Question

我试图在Vue中创建一个自定义组件。

这是我能想到的最简单的组件，而且value道具总是没有定义。

<template>
    <div>
        - {{ value }} -
    </div>
</template>

<script>
    export default {
        props: ['value'],

        mounted() {
            console.log(this.value);
        }
    }
</script>

我叫它没有做什么特别的事：

<el-text-group v-model="testVar"></el-text-group>

{{ testVar }}

变量testVar显示得很好，但是自定义组件没有显示什么？

我学习了大量的教程和官方文档：

https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

我用的是最新的Vue 2.4.2。对于Vue 2.2.x，它似乎运行得很好。

实际上，我几个月前就有过这个问题，但我想我会等着看是否有什么东西被解决了。但是现在再进行一次测试，问题仍然存在。不知道，似乎很基本，不确定是否有一些变化，如何做到这一点？

文件：

app.js

var component = require('./components/App.vue');

component.router = Vue.router;

new Vue(component).$mount('#app');

App.vue

<template>
    <div>
        Hello

        <hr/>

        <test-cpt v-model="testVar"></test-cpt>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                testVar: 'test'
            };
        },

        components: {
            testCpt: require('./TestCpt.vue')
        }
    }
</script>

TestCpt.vue

<template>
    <div>
        - {{ value }} -
    </div>
</template>

<script>
    export default {
        props: ['value']
    }
</script>

Answer 1

删除node_modules并重新安装似乎可以修复它。