子组件无法正常显示

最新推荐文章于 2024-09-13 11:22:15 发布

原创最新推荐文章于 2024-09-13 11:22:15 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue问题集专栏收录该内容

4 篇文章

订阅专栏

在Vue中，遇到父组件引用子组件但子组件未显示的问题。错误源于子组件注册在Vue实例创建之后，导致编译时找不到子组件定义。解决方法是将子组件注册的代码放在创建Vue实例之前，确保在实例化时子组件已经注册成功。

错误形式：父组件中引用了子组件，但是子组件没有正常显示
编码环境：在html页面中通过cdn的方式进行引入，采用vue基础语法进行编写，父组件与子组件在同一个页面中编码，同时子组件的注册也在当前页面

错误代码：

<div id="app">
    // 使用子组件
    <to-item v-bind:todo="message"></to-item>
</div>
// 引入vue
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // 创建根组件的Vue实例
    const vue = new Vue({
        el: '#app',
        data: {
            message: '页面加载于' + new Date().toLocaleString(),
            seen: true
        }
    })
	// 子组件注册
    Vue.component('to-item', {
        props: ['todo'],
        template: '<span>{{ todo }}</span>'
    })
</script>

解决：将子组件的注册代码放在创建根组件Vue实例的代码之前

<div id="app">
    <to-item v-bind:todo="message"></to-item>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.component('to-item', {
        props: ['todo'],
        template: '<span>{{ todo }}</span>'
    })

    const vue = new Vue({
        el: '#app',
        data: {
            message: '页面加载于' + new Date().toLocaleString(),
            seen: true
        }
    })
</script>

问题原因：

如果是原来的错误代码放置代码的位置的话，由于代码从上往下进行编码，先会对第一个创建的Vue实例进行编译，编译当编译到to-item这个标签的时候，从已有注册的Vue实例中（一个组件本质上是一个拥有预定义选项的一个 Vue 实例），未找到to-item这个组件，所以会作为错误处理。