props接管值的几种写法
props是只读的,不容许间接批改传进来的props的值,批改就会有正告
// 最简略的接管值的形式,接管的是一个数组props: [name,age]// 接管参数是一个对象props: { name: String, age: Number}// 最残缺的形式props: { name: { type: String, // 数据的类型限度 required: true // 数据是否必传 }, age: { type: Number, default: true // 数据默认值 }}
Demo
// 父组件<template> <div> <Student name="景天" :age="20"></Student> <Student name="雪见"></Student> </div></template><script>import Student from './Student.vue'export default { name: 'HelloWorld', data () { return { } }, components: { Student }}</script>// 子组件<template> <div> <h1>{{ msg }}</h1> <div>姓名:{{name}}</div> <div>年龄:{{age}}</div> </div></template>3<script>export default { name: 'Student', data () { return { msg: 'Welcome' } }, props: { name: { type: String, requried: true }, age: { type: Number, default: 18 } }}</script>