父组件 : <template> <!-- 1.展示why的个人信息 --> <show-info name="why" :age="18" :height="1.88" /> </template> <script> import ShowInfo from './ShowInfo.vue' export default { components: { ShowInfo } } </script> <style scoped> </style>
子组件 : <template> <div class="infos"> <h2>姓名: {{ name }}</h2> <h2>年龄: {{ age }}</h2> <h2>身高: {{ height }}</h2> </div> </template> <script> export default { // 2.props对象语法(必须掌握) props: { name: { type: String, default: "我是默认name" }, age: { type: Number, required: true, default: 0 }, height: { type: Number, default: 2 }, //对象类型的写法 : 默认值时, 需要编写default的函数, 函数返回默认值 friend: { type: Object, default() { return { name: "james" } } }, // 数组类型的写法 : 默认值是 hobbies: { type: Array, default: () => ["篮球", "rap", "唱跳"] } } } </script> <style scoped> </style>
标签:name,对象,写法,default,props,默认值,type From: https://www.cnblogs.com/qd-lbxx/p/16612340.html