一，父子組件
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.父組件在使用子組件的地方監聽組件觸發的事件
