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