Vue：props（接收参数）

使用组件Student时候：<Student></Student>

思考：能否将我要的数据丢给组件而不是组件自己定义data

于是<Student name=“小红” age=“15”></Student>

是被Vue接受的

props：是Vue组件获取外部传入值得属性

作用：将外部获取的值加到vm实例中使得现在的vm可以调用

三种接收参数方式

简单处理法

<template>
  <div>
  <h2>学生名字：{{sdt}}</h2>
  <h2>年龄：{{age}}</h2>
  </div>
</template>

<script>
    export default {
        name: "Student",
      data(){
        return {

        }
      }
      //props接收字段student：发现原来已经有了所以接收的字段不能设置在data下
        //加引号
      ,props:['sdt','age']

    }
</script>

<style scoped>

</style>

---

规范接收

<template>
  <div>
  <h2>学生名字：{{sdt}}</h2>
  <h2>年龄：{{age}}</h2>
  </div>
</template>

<script>
    export default {
        name: "Student",
      data(){
        return {

        }
      }
      //规定接收的类型
      ,props:{
            sdt:String,
            age:Number
        }
    }
</script>

<style scoped>

</style>

---

超级严格接收

<template>
  <div>
  <h2>学生名字：{{sdt}}</h2>
  <h2>年龄：{{age}}</h2>
  </div>
</template>

<script>
    export default {
        name: "Student",
      data(){
        return {

        }
      }
     
      ,props:{
            sdt:{
                type:String,
                 required:true //必须的
            },
            age:Number
        }





    }
</script>

<style scoped>

</style>

---

关于传入的注意点：

原来所有传递都会变成String包含age=“18”
<Student sdt="小白" age="18"></Student>
加上v-bind：告诉vc传入的不是字符串，而是一个数字
<Student sdt="小白" :age="18"></Student>