<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/vue@2.6.12/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>