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

2021-07-04 18:01:00 阅读：126 来源： 互联网

标签：info 驼峰 Vuejs childMessage 标识组件 message

子组件变量名称为驼峰标识时，在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>

标签：info,驼峰,Vuejs,childMessage,标识,组件,message
来源： https://www.cnblogs.com/invoker2021/p/14969487.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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