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>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14969487.html