Vue props传值两种写法

示例：
父组件：

<template>
  <div>
    <school id="school" ref="sch" name1="SJ" address="China" />
    <school id="school" ref="sch" name1="SJ1" address="China1" />
  </div>
</template>

子组件：

<template>
  <div class="school">
    <h1>{{ msg }}</h1>
    <h2>学校名称:{{ name1 }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
  export default {
    name: 'School',
    data() {
      return {
        msg: 'props study'
      }
    },
    // 简单传值
    // props: ['name1', 'address']
    // 限定传值
    props: {
      name1: {
        type: String, // 限制数据类型
        required: true // 限制必须传值
      },
      age: {
        type: Number,
        default: 99 // 可以不传值，默认为99
      },
      address: {
        type: String,
        required: true
      }
    }
  }
</script>

简单传值
不对传值的数据类型进行限制
限定传值
对数据类型和是否一定要传值（不传值使用默认值）进行限制
注意：
针对于props配置传进子组件的变量一般不能进行修改，会报错
可以通过在子组件的data中声明一个新的变量进行接收之后再修改
父子组件传值的时候变量不要设置为一些关键词（例如ref或者key）会报错