vue学习（33）props

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "欢迎学习vue！",
    };
  },
  //第一种写法
  //props:['name','age','sex']
  // 第二种写法
  // props:{name:String,age:Number,sex:String}
  //第三种写法
  props:{
      name:{
          type:String,
          require:true
      },
      age:{
          type:Number,
          default:18
      },
      sex:{
          type:String,
          require:true
      }
  }

};
</script>

<style></style>

知识点：

1. 配置项props:

• 让组件接收外部传来的数据
  （1）传递数据：<Demo name='xxx'/>
  （2）接收数据
  第一种方式：只接收
  props:['name'];
  第二种方式：限制类型
  props:{name:String}
  第三种方式：限制类型+指定默认值+必填限制(一般默认值和必填限制不会同时出现)
  props:{
  name:{
  type:String,
  default:'xxx',
  require:true
  }
  }
• 修改props的值会报错（浅层次的监视，比如你去修改对象中的某个值，它是检测不到的，整个对象的替换，它会检测到），如果确实需要改变值，可以在data中声明一个变量等于props传入的值。