props使用

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>

 

 

 

props使用

上一篇:Wordpress 记录登录日志


下一篇:Photoshop制作开阔的暗褐色外景婚片