使用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",
});