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一起使用。

我几个月前确实遇到过这个问题，但我想我会等着看是否有问题得到解决。但现在再次测试，问题仍然存在。不知道，看起来非常基本，不确定如何做到这一点有什么变化？

FILES：

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并重新安装似乎解决了这个问题。

Vue 2自定义组件值始终为＆＃34;未定义＆＃34;

1 个答案: