-
错误形式:父组件中引用了子组件,但是子组件没有正常显示
-
编码环境:在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
这个组件,所以会作为错误处理。
子组件无法正常显示
最新推荐文章于 2023-08-25 09:09:29 发布