一，父子组件
1.在一个组件内部定义另外一个组件，称为父子组件
2.子组件只能在父组件内容使用（子组件在父组件定义的模板中使用）
3.默认情况下，子组件无法访问父组件的数据，每个组件实例的作用域是独立的
二，组件之间数据的传递--子组件访问父组件的数据（通信）
在调用子组件时，绑定想要获取的父组件的数据(on-bind=属性名，用于绑定)
在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据
注意：组件中的数据共有三种形式 ：data，props，computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之间的通信</title>
<script src="../js/vue/vue.js"></script>
</head>
<script>
window.onload=function () {
let vm = new Vue({//根组件
el:"#myApp",
data:{
msg:"welcome to my vue"
},
components:{
"my-hello":{//父组件
template:"#hello",
data:function(){
return {
msg:'海贼王',
name:'路飞',
age:20,
user:{id:708,username:'娜美'}
}
},
components:{//子组件
"my-world":{
template:"#world",
// props:['msg','name'],//简单的字符串数组
props:{//也可以是对象，允许设置高级配置，例如属性，默认值，检验
msg:String,//定义类型
name:{
type:String,
required:true//必须传递name这个属性，否则会报错
},
age:{
type:Number,
default:18,//如果父级没有这个参数，默认指为18
validator:function(value){//对传递过来的值进行检验
return value>0
}
},
user:{
type:Object,
default:function(){//如果返回的是对象或者数组，默认值设置要用一个函数返回
return {id:2201,username:'乔巴'}
}
}
}
}
}
},
}
})
}
</script>
<body>
<div id="myApp">
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是父组件</h3>
<p>父组件（自己）的参数：{{msg}}-{{name}}-{{age}}</p>
<!-- 子组件要放在父组件内容使用 -->
<my-world :msg="msg" :name="name" :age="age" :user="user"></my-world>
</div>
</template>
<template id="world">
<div>
<h3>我是子组件</h3>
<!-- 子组件不能直接使用父组件的参数
<p>子组件使用父组件的参数：{{msg}}-{{name}}</p> -->
<!-- 通过props获取的属性，可以使用 -->
<p>子组件使用父组件的参数：{{msg}}-{{name}}-{{age}}-{{user.username}}</p>
</div>
</template>
</body>
</html>
注意事项：
1、通过on-bind=""绑定父级的参数在子组件的标签中，在子组件通过props获取父级的参数
2、props的值可以是简单字符串数组，也可以是复杂的对象，可以设置类型，默认值，校验
关键代码：
<my-world :msg="msg" :name="name" :age="age" :user="user"></my-world>
props:['msg','name'],//简单的字符串数组
三，组件之间数据的传递--父组件访问子组件的数据（通信）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之间的通信</title>
<script src="../js/vue/vue.js"></script>
</head>
<script>
window.onload=function () {
let vm = new Vue({//根组件
el:"#myApp",
data:{
msg:"welcome to my vue"
},
components:{
"my-hello":{//父组件
template:"#hello",
data:function(){
return {
msg:'海贼王',
name:'路飞',
age:20,
user:{id:708,username:'娜美'},
sex:'',//获取子级数据
height :'',
}
},
methods:{
//接受子组件发过来的数据
getSonDadat:function(sex,height){
this.sex=sex;
this.height = height;
}
},
components:{//子组件
"my-world":{
data:function(){
return {
sex:'女',
height :160,
}
},
methods:{
// 子组件发送数据给父组件，$emit(时间名称,数据)
send:function(){
this.$emit('e-world',this.sex,this.height);
}
},
mounted:function(){
this.send();
},
template:"#world",
// props:['msg','name'],//简单的字符串数组
props:{//也可以是对象，允许设置高级配置，例如属性，默认值，检验
msg:String,//定义类型
name:{
type:String,
required:true//必须传递name这个属性，否则会报错
},
age:{
type:Number,
default:18,//如果父级没有这个参数，默认指为18
validator:function(value){//对传递过来的值进行检验
return value>0
}
},
user:{
type:Object,
default:function(){//如果返回的是对象或者数组，默认值设置要用一个函数返回
return {id:2201,username:'乔巴'}
}
}
}
}
}
},
}
})
}
</script>
<body>
<div id="myApp">
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是父组件</h3>
<p>父组件（自己）的参数：{{msg}}-{{name}}-{{age}}</p>
<!-- 子组件要放在父组件内容使用 -->
<!-- 无论是子传给父，还是父传给子，所有的传递过程都在是在这完成 -->
<my-world :msg="msg" :name="name" :age="age" :user="user" @e-world="getSonDadat"></my-world>
<p >获取子组件的数据{{sex}}-{{height}}</p>
</div>
</template>
<template id="world">
<div>
<button @click="send">发送</button>
<h3>我是子组件</h3>
<!-- 子组件不能直接使用父组件的参数
<p>子组件使用父组件的参数：{{msg}}-{{name}}</p> -->
<!-- 通过props获取的属性，可以使用 -->
<p>子组件使用父组件的参数：{{msg}}-{{name}}-{{age}}-{{user.username}}</p>
<p>子组件展示自己组件的参数：{{sex}}-{{height}}</p>
</div>
</template>
</body>
</html>
注意：
1.子组件创建一个方法，执行this.$emit(方法名,参数1，参数2....)方法
send:function(){
this.$emit('e-world',this.sex,this.height);
}
2.在父组件创建获取子组件传递过来的的数据
getSonDadat:function(sex,height){
this.sex=sex;
this.height = height;
}
3.在子组件标签中执行子组件emit方法
<my-world @e-world="getSonDadat"></my-world>
总结：
1.在子组件中使用vm.$emit(事件名，数据)触发一个自定义事件，事件名自定义
2.父组件在使用子组件的地方监听组件触发的事件
