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

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://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 并重新安装似乎可以解决它。