父子组件通信
有可能在一个页面中，我们从服务器请求到了很多数据，其中一部分的数据并非是在我们的大组件中展示的，而是需要在其子组件进行展示。但是子组件并不会再次发送一个网络请求（发送请求对服务器压力大），而是直接将父组件中的数据传递给子组件
注意：在开发中，Vue实例和子组件的通信和父组件与子组件的通信过程是一样的，所以以下示例通过Vue实例和子组件的通信来解释说明
父子组件通信—父传子
通过 props（properties）向子组件传递数据，使用props来声明需要从父组件那里接收的数据，这里介绍两种方式
第一种方式------字符串数组
第一种方式是使用字符串数组，数组中的字符串就是传递时的名称（子组件中的变量名）
注意：
（1）一定要使用v-bind绑定父组件中的变量
（2）不使用v-bind,会将message、books当作一个字符串
（3）具体步骤看注释
<body>
<div id="app">
<cpn book="books" cmessage="message"></cpn>
//父传子
<cpn :book="books" :cmessage="message"></cpn>
</div>
//模板
<template id="cpn">
<div>
<ul>
<li v-for="item in book">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="../vue.js"></script>
<script>
const cpn = {
template:"#cpn",
//使用字符串数组
props:["cmessage","book"]
}
//父组件
const app = new Vue({
el:'#app',
data:{
message:"hello vue",
books:["红楼梦","水浒传","三国演义","西游记"]
},
//子组件
components:{
cpn
}
})
</script>
</body>
第二种方式------对象
第一种方式是使用对象，对象可以设置传递时的类型，也可以设置默认值，还有是否必传等。
注意：
(1)提供默认值只有在组件中没有使用v-bind绑定父组件中的值时，显示默认值
(2) 高版本Vue中类型是对象或函数时，默认值必须是一个函数
(3)require为true时，父组件必须向子组件传值（使用v-bind），否则报错
类型限制
const cpn = {
template:"#cpn",
props: {
//单个类型限制
cmessage:String，
//多个类型限制
book:[Number,String]
}
}
提供默认值
使用default，当没有使用v-bind绑定父组件中的值时，显示默认值
const cpn = {
template:"#cpn",
props: {
book:{
type: Array,
//高版本Vue
default(){
return []
}
cmessage:{
type: String,
//默认值是父组件没有向子组件传值才会显示
default:"hello",
}
}
是否必传
使用require（布尔型），为true表示父组件必须向子组件传的值，若没有传，则会报错
const cpn = {
template:"#cpn",
props: {
book:Array,
cmessage:{
type: String,
//布尔值，父组件必须向子组件传的值，否则报错
require:true
}
}
