8.元件中父傳子(props)中的駝峰標識
阿新 • • 發佈:2020-12-29
<body> <!-- 父元件模板 --> <div id="app"> <!-- 如果屬性名有 大寫 要換小寫 並用 - 隔開 如下 --> <cpn :cinfo="info" :child-my-message="message"></cpn> </div> <!-- 子元件模板 --> <template id="cpn"> <div> <p>名字:{{ cinfo.name }} </p> <p>年齡:{{ cinfo.age }} </p> <p>身高:{{ cinfo.height }} </p> <h1> {{ childMyMessage }} </h1> </div> </template> <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script> <script> //子元件 const cpn = { template: "#cpn", props: { cinfo: { type: Object, default () { return {} } }, childMyMessage: { type: String,default: "" } } } // 父元件 const app = new Vue({ el: '#app', data: { info: { name: "why", age: 17, height: 162 }, message:"好好學習 天天向上" }, components: { cpn } }) </script> </body>