Vuejs学习笔记(二)-7.父子组件访问中，子组件变量名称使用驼峰标识时需要注意的事情

子组件变量名称为驼峰标识时，在html中子组件中子组件的变量与父组件的变量绑定关系时，子组件标签中的变量需要使用横杆，比如子组件变量为childMessage，那么在html中子组件绑定父组件的标签就应该写成child-message。具体代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>14 父传子-props使用到驼峰标识遇到的问题</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9   <p>父组件的message内容:{{ message }}</p>
10   <p>父组件的info对象内容:1.姓名:{{info.name}}2.年龄:{{info.age}}3.身高:{{info.height}}</p>
11   <p>--------------------父子组件之间的分割线--------------------------------------------</p>
12   <cpn1 :child-message="message" :child-info="info"></cpn1>
13 </div>
14 
15 <!--template必须使用div包裹起来-->
16 <template id="cpn1">
17   <div>
18     <h2>{{ childMessage }}</h2>
19     <h2>{{ childInfo }}</h2>
20   </div>
21 </template>
22 <script src="../js/vue.js"></script>
23 <script>
24   const cpn1 = {
25     template: '#cpn1',
26     props: {
27       childMessage: {
28         type: String,
29         default: 'childMessage的默认值'
30       },
31       childInfo: {
32         type: Object,
33         default() {
34           return {
35             name: 'gaga',
36             age: 28,
37             height: 165,
38           }
39         }
40       }
41     }
42   }
43 
44   const app = new Vue({
45     el: '#app',
46     data: {
47       message: '驼峰标识的问题',
48       info: {
49         name: 'invoker',
50         age: 18,
51         height: 174,
52       }
53     },
54     components: {
55       cpn1
56     }
57   })
58 </script>
59 </body>
60 </html>

 

posted @ 2021-07-04 17:50  kaer_invoker  阅读(131)  评论(0)  编辑  收藏  举报