vue组件中camelCased (驼峰式) 命名与 kebab-case(短横线命名)
HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>prop动态=绑定</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> <child v-bind:my-message="message"></child> <!--此处的my-message只能是短横线命名(若为驼峰式则全部转换为小写。)--> </div> <script> Vue.component('child',{ // props:['my-message'], props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式,他们在此处是相互转换的 template:'<p>{{myMessage}}</p>' // 此处有限制,是字符串模板,{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式,则会报错。如下图: }); new Vue({ el:'#app', data:{ message:'' } }) </script> </body> </html>