1.简单声明接受 props:[‘name‘,‘age‘] 2.接受的同时对数据进行限制 props:{ name:String, age:Number } 3.接受的同时对数据进行限制+默认值的指定+必要性的限制 props:{ name:{ type:String, required:true//是否必传 }, age:{ type:Number, //required:default default:99 } }
<template> <div class="student"> <h1 v-text="msg"></h1> <h2>{{name}}</h2> <h2>{{myage+1}}</h2> <button @click="ageadd">年龄加1</button> </div> </template> <script> export default{ name:‘Student‘, data() { return{ msg:‘dadadadadad‘, myage:this.age } }, methods:{ ageadd(){ this.myage ++ } }, props:{ name:{ type:String, required:true//是否必传 }, age:{ type:Number, //required:default default:99 } } } </script> <style> </style>
app.vue
<template> <div id="app"> <Student name=‘大象‘ :age=60></Student> <hr > <Student name=‘王老二‘ :age=18></Student> <hr > </div> </template>
<script> import Student from ‘./components/Student.vue‘ export default{ name:‘App‘, components:{ Student } } </script> <style> </style>