在写组件嵌套过程中，必然涉及到父子组件之间的通信问题，父组件向子组件传递很简单，可以通过props来实现。
父组件向子组件传递参数
先来看父组件：
代码语言：javascript复制<template>
<Son :childCom="content"></Son>
</template>
<script>
import Son from './son'
export default{
name:"father",
data(){
return {
content:'落帆亭'
}
},
components:{
Son
},
}
</script>子组件接收需要在porps对象中定义一下，有两种方式可以进行定义
第一种，只定义接收名，不进行类型校验：
代码语言：javascript复制<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
props:["childCom"]
}
</script>另一种方式是进行类型校验，如果类型不一致，则会进行报错：
代码语言：javascript复制<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
props:{
childCom:{
type:String,
default:"默认字符"//这里是提供默认值，如不需要可不添加
}
}
}
</script>子组件向父组件传递参数
子组件向父组件传递有两种方式，先说第一种
$emit
父子组件使用emit和v-on时，子组件使用emit触发，父组件在实例中v-on自定义事件监听。
父组件：
代码语言：javascript复制<template>
<Son :childCom="content" @sendMsg="getMsg"></Son>
</template>
<script>
import Son from './son'
export default{
name:"father",
data(){
return {
content:'落帆亭'
}
},
methods:{
getMsg(data){
console.log(data);
}
},
components:{
Son
},
}
</script>子组件
代码语言：javascript复制<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
<button @click="sendMessage">发送数据</button>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
methods:{
sendMessage(){
this.$emit("sendMsg",this.msg);
}
},
props:{
childCom:{
type:String,
default:"默认字符"//这里是提供默认值，如不需要可不添加
}
}
}
</script>调用父组件方法
第二种方法就是直接调用父组件的方法，通过方法参数传递的方式来进行数据交互，原理就在于父组件将其自身的方法通过props传递给子组件，子组件调用传参即可。
父组件：
代码语言：javascript复制<template>
<Son :childCom="content" :fatherClick="getMsg"></Son>
</template>
<script>
import Son from './son'
export default{
name:"father",
data(){
return {
content:'落帆亭'
}
},
methods:{
getMsg(data){
console.log(data);
}
},
components:{
Son
},
}
</script>子组件：
代码语言：javascript复制<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
<button @click="sendMessage">发送数据</button>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
methods:{
sendMessage(){
this.fatherClick(this.msg);
}
},
props:{
childCom:{
type:String,
default:"默认字符"//这里是提供默认值，如不需要可不添加
},
fatherClick:{
type:Function
}
}
}
</script>以上几种方式就是在vue中父组件和子组件之间的数据传递
