使用Vue的同學，本文一、二兩個小結必須掌握。
一*、父組件給子組件傳遞數據
1在父組件中通過v-bind傳遞數據
傳遞格式 v-bind:自定義接收名稱 = "要傳遞數據"
2在註冊組件的子組件中通過props接收數據
接收格式 props: [“自定義接收名稱”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件-父子組件數據傳遞</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<!--注意點：組件是可以使用自己的數據的-->
<p>組件爸爸（父組件）</p>
<p>{{name}}</p>
<p>{{age}}</p>
<!--這裏通過:parentname="name"將父組件的name通過parentname傳遞給了子組件-->
<son v-bind:parentname="name" :parentage="age"></son>
</div>
</template>
<template id="son">
<div>
<!--這裏通過parentname使用了父組件傳遞過來的數據-->
<p>組件兒子（子組件）</p>
<p>{{parentname}}</p>
<p>{{parentage}}</p>
</div>
</template>
<script>
/*自定義全局組件（組件名稱，組件配置）*/
Vue.component( "father", {
template:"#father ",
data:function(){//父組件有數據了
return {
name:"gege",
age:3
}
},
//子組件
components:{
"son":{
template:"#son",
//這裏通過parentname接收了父組件傳遞過來的數據
props:[
"parentname","parentage"
]
}
}
});
let vue = new Vue({
el:"#app",
// MVVM中的Model
});
</script>
</body>
</html>
二*、父組件給子組件傳遞方法
1、在父組件中通過v-on(@)傳遞方法
傳遞格式 v-on:自定義接收名稱 = “要傳遞方法”
2、在子組件中自定義一個方法
3、在自定義方法中通過 this.$emit(‘自定義接收名稱’);觸發傳遞過來的方法
注意點：
和傳遞數據不同，如果傳遞方法，那麼在子組件中不需要接收
如果傳遞的是方法，那麼需要在子組件中自定義一個方法。
如果傳遞的是方法，那麼在子組件中直接使用自定義的方法即可
如果傳遞的是方法，那麼需要在子組件自定義的方法中通過this.$emit(“自定義接收的名稱”)的方法來觸發父組件傳遞過來的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48、vue組件-父子組件方法傳遞</title>
<!-- 2.下載導入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<!--組件只能由一個根元素-->
<div>
<button @click="say">阿爸</button>
<!--這裏通過parentsay將父組件的say方法傳遞給了子組件-->
<son @parentsay="say"></son>
</div>
</template>
<template id="son">
<div>
<button @click="sanFn">阿爸</button>
</div>
</template>
<script>
/*自定義全局組件（組件名稱，組件配置）*/
Vue.component( "father", {
template:"#father ",
methods: {
say(){
alert("123");
}
},
//子組件
components:{
"son":{
template:"#son",
methods:{
sanFn(){
this.$emit("parentsay");
}
}
}
}
});
let vue = new Vue({
el:"#app",
});
</script>
</body>
</html>
三、子組件給父組件傳遞數據
子組件給父組件傳遞數據其實就是子組件調用父組件方法的時候，給方法傳遞參數。
Vue.component( "father", {
template:"#father ",
methods: {
say(data){
console.log(data);//打印gege
}
},
//子組件
components:{
"son":{
template:"#son",
// props:["parentsay"]
methods:{
sanFn(){
/*$emit(需要調用的函數名稱，給調用的函數傳遞參數)*/
this.$emit("parentsay", "gege");//“gege”即爲給父組件傳遞的參數
}
}
}
}
});
四、組件數據多級傳遞
組件的數據多級傳遞時，必須一級一級傳遞，不能跳級傳遞
需求：在兒子組件中使用爺爺組件的數據及方法
<!-- 2.下載導入vue.js-->
<div id="app">
<grandfather></grandfather>
</div>
<template id="grandfather">
<!--組件只能由一個根元素-->
<div>
<p>{{name}}</p>
<father :grandfathername="name"></father>
</div>
</template>
<template id="father">
<div>
<p>{{grandfathername}}</p>
<son :fname="grandfathername"></son>
</div>
</template>
<template id="son">
<div>
<p>{{fname}}</p>
</div>
</template>
<script>
//爺爺組件
Vue.component( "grandfather", {
template:"#grandfather ",
data:function(){
return {
name:"yeye"
}
},
//阿爸組件
components:{
"father":{
template:"#father",
props:["grandfathername"],
//兒子
components:{
"son":{
template:"#son",
props:["fname"],
}
}
}
}
});
let vue = new Vue({
el:"#app",
});
</script>
五、組件方法多級傳遞
組件的方法多級傳遞時，必須一級一級傳遞，不能跳級傳遞
<div id="app">
<grandfather></grandfather>
</div>
<template id="grandfather">
<!--組件只能由一個根元素-->
<div>
<button @click="haha">爺爺</button>
<father :grandfathername="name" @grandsay="haha"></father>
</div>
</template>
<template id="father">
<div>
<button @click="fatherfn">阿爸</button>
<son :fname="grandfathername" @fathersay="fatherfn"></son>
</div>
</template>
<template id="son">
<div>
<button @click="sonfn">兒子</button>
</div>
</template>
<script>
/*自定義全局組件，註冊組件（組件名稱，組件配置）*/
//爺爺組件
Vue.component( "grandfather", {
template:"#grandfather ",
methods:{
haha(){
console.log("123");
}
},
//阿爸組件
components:{
"father":{
template:"#father",
methods:{
fatherfn(){
this.$emit("grandsay")
}
},
//兒子
components:{
"son":{
template:"#son",
methods:{
sonfn(){
this.$emit("fathersay")
}
},
}
}
}
}
});
let vue = new Vue({
el:"#app",
});