vue 2.0 父子组件出现的问题

话不多说上一个正确的代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <title>Document</title>
 8   <script src="js/vue.js"></script>
 9 </head>
10 <body>
11   <div id="app">
12     <parent></parent>
13   </div>
14   <script>
15      const child ={
16       data(){
17         return{
18           message:'儿子'
19         }
20       },
21       template:'<div>{{message}}</div>'
22      }
23     const parent ={
24       data(){
25         return{
26           message:'父亲'
27         }
28       },
29       components:{
30           child1:child
31       },
32       template:'<div>{{message}}<br/>---- <child1></child1></div>'
33     }
34       const vm = new Vue({
35         el: "#app",
36         data: {},
37         components: {
38           parent,
39         }
40       });
41   </script>
42 </body>
43 </html>

测试结果 正确显示

现在写几个 大家编写过程 可能会出现的 报错的问题

Uncaught ReferenceError: Cannot access 'child' before initialization

意思就是 初始化前无法访问“child”

这是因为 组件 顺序出错了

 

 

[Vue warn]: Unknown custom element: <child1> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Parent>
<Root>

 就是说 未知的自定义元素：＜child1＞-您是否正确注册了组件？对于递归组件，请确保提供“name”选项

 

posted on 2023-05-01 23:22  是水饺不是水饺  阅读(64)  评论(0)    收藏  举报

导航