1. 程式人生 > 實用技巧 >8.元件中父傳子(props)中的駝峰標識

8.元件中父傳子(props)中的駝峰標識

<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>