Vue中，props配置项

组件在复用，数据是动态的。

生活中很相似的地方就是微信转账，A转给B100元，B必须要接收（区别支付宝直接转账不需要接收）。

// App
<template>
  <div id="app">
   <School name = "武汉化工大学" />
  </div>
</template>

<script>
import School from './components/School.vue'
export default {
  name: 'App',
  components: {
    School
  }
}
</script>

//School
<template>
  <div>
     <h2>学校的名称是：{{name}}</h2>
  </div>
</template>

<script>
export default {
    name:'School',
    props:['name']
    
}
</script>

在App组件中，<School>中添加一个name属性，并且给一个值。

在School组件中，有props配置项，接收传过来的参数，实现数据动态绑定。

也就是说，数据从App组件传到School组件，School组件接收到数据，在自己的组件内调用。

-------------------------------------------------------------

具体细节问题：

1，在App组件中，传递的只能是字符串，所以有number类型过来时，如果在{{name+1}}就没法处理，直接由50变为501。

解决办法：在App中传递number类型数字时，前面添加上：（v-bind：），这时后面字符串的内容就会变为JS语句，也就成了number类型数字。

2，props有3种形式，上图是简写形式，有些具体问题很难解决：比如有些数据不想收，有些数据要有值但是没有传

export default {
    name:'School',
    props:{
        name:String,
        year:number
    }
}

第二种，对数据类型进行限制：写成这种形式，：后面写的是  想要的数据的类型

当然，上面这么写会报错，因为year不是number类型的属性

第三种，再具体点，有默认值，是不是必要的

export default {
    name:'School',
    props:{
        name:{
            type:String,
            required:true
        },
        year:{
            default:100
        }
    }
}