12. props配置

App.vue

<template>
  <div>
    <Student name="呓语" sex="女" :age="20"></Student>
  </div>
</template>
<script>
import Student from "@/components/Student";
export default {
  name: "App",
  components:{Student},
  data(){
    return{
      msg:"欢迎学习Vue!"
    }
  },

}
</script>
<style scoped>
</style>

Student.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名: {{name}}</h2>
    <h2>学生性别: {{sex}}</h2>
    <h2>学生年龄: {{myAge+1}}</h2>
    <button @click="updateAge">尝试修改年龄</button>
  </div>
</template>
<script>
export default {
  name: "Student",
  data(){
    return{
      msg:"我是来自南方IT的学生!",
      myAge:this.age
    }
  },
  //简单声明接收
  props:['name','age','sex'],
  methods:{
    updateAge(){
      this.myAge++
    }
  }

  //接收的同时对数据进行类型限制
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String
  // }

  //接收的同时对数据进行类型限制+默认值的指定+必要性的限制
  // props:{
  //   name:{
  //     type:String, //name的类型是字符串
  //     required:true //name是必要的
  //   },
  //   sex:{
  //     type:String,
  //     required: true
  //   },
  //   age:{
  //     type:Number,
  //     default:99 //如果age为空,则默认值为99
  //   }
  // }
}
</script>
<style scoped>
</style>

总结

实现的功能: 让组件接收外部传过来的数据

1.传递数据:

  <Student name="xxx"/>

2.接收数据:

  1.第一种方式:(只接收): 

     props:['name']

  2.第二种方式(限制类型):

     props:{

  ​       name:String

     }

  3.第三种方式(限制类型,限制必要性,指定默认值)

     props:{

  ​       type:String, //类型

  ​       required:true, //必要性

  ​       default:'老王' //默认值

     }

备注: props是只读的,Vue底层会检测你对props的修改,如果进行了修改,就会发出警告,若业务层需求要求需要修改,name请复制props的内容到data中一份,然后去修改data中的数据.