在简绍通信之前，我么你先来建两个组间father.vue和child.vue作为实例的基础。
//父组件
<template>
<div>
<img src="../../assets/img.jpeg">
<h1>我是父花花</h1>
<child></child>
</div>
</template>
<script>
import Child from './child'
export default {
name: "father",
components:{
Child
}
}
</script>
//子组件
<template>
<div>
<h3>我是子花花</h3>
</div>
</template>
这两部分代码很清楚，父组间通过import的方式导入子组件，并在components属性中注册，然后就可以以标签<child>的形式嵌套进父组件，运行father.vue后，如图：
效果图1
1、通过prop实现通信
子组件的props能接受父组件的数据，仅仅是接受，props是单向绑定的，即只能父组间向子组件传值，不能反向。具体可查看官方文档。
prop的专递方式有两种：
（1）静态传递
子组件通过props选项声明一个自定义属性，父组件可以在嵌套标签的时候，通过这个属性往子组件传递数据。
//父组件
<template>
<div>
<img src="../../assets/img.jpeg">
<h1>我是父花花</h1>
<child message="我是子花花"></child><!--通过自定义属性传递数据-->
</div>
</template>
<script>
import Child from './child'
export default {
name: "father",
components:{
Child
}
}
</script>
//子组件
<template>
<div>
<h3>{{message}}</h3>
</div>
</template>
<script>
export default {
name: "child",
props:[
'message'//声明一个自定义的属性
]
}
</script>
（2）动态传递
我们可以像上面一样给props传入一个静态的值，但更多时候需要动态传数据，这时候我们可以通过v-bind动态传值，使用v-bind绑定props的自定义属性，传递过去的就不是静态字符串了，还可以传递数字、布尔值、对象、数组等任何类型的值，具体可查看官方文档。
//父组件
<template>
<div>
<img src="../../assets/img.jpeg">
<h1>我是父花花</h1>
<child message="我是子花花"></child>
<child :message="msg"></child><!-- 用一个变量进行动态赋值。-->
<child :message="msg1+msg2"></child>
</div>
</template>
<script>
import Child from './child'
export default {
name: "father",
components: {
Child
},
data() {
return {
msg:'我是子花花二'+Math.random(),
msg1:'我是子花花三',
msg2:'xiahuahua',
}
}
}
</script>
//子组件
<template>
<div>
<h3>{{message}}</h3>
</div>
</template>
<script>
export default {
name: "child",
props:[
'message'//声明一个自定义的属性
]
}
</script>
效果如图：
效果图2
2、通过$ref实现通信
对于ref，官方的解释是：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $ref 对象上。
对于官方的解释，可以这样理解：
- 如果ref用在子组件上，指向的是组间实例，可以理解为子组件的索引，通过$ref可以获取到在子组件里定义的属性和方法。
- 如果ref用在DOM元素上，引用指向的就是DOM元素，通过$ref 可以获取DOM元素的属性集合，作用与JQ选择器类似。
//父组件
<template>
<div>
<img src="../../assets/img.jpeg">
<h1>我是父花花</h1>
<child ref="msg"></child>
</div>
</template>
<script>
import Child from './child'
export default {
name: "father",
components:{
Child
},
mounted(){
console.log(this.$refs.msg);
this.$refs.msg.getMessage('我是子花花!~');
}
}
</script>
//子组件
<template>
<div>
<h3>{{message}}</h3>
</div>
</template>
<script>
export default {
name: "child",
data() {
return {
message:''
}
},
methods: {
getMessage(msg) {
this.message = msg;
}
}
}
</script>
从上面代码可以看出，通过ref=‘msg’可以将子组件child的实例给ref，并且通过this.refs.msg)打印出来的数据，如图所示：
console.log
最后效果如图：
效果图3
补充：prop和$ref之间的区别
- prop注重数据的传递，它并不能调用子组件里的属性和方法。像创建文章组间时，自定义标题和内容这样的场景，最适合使用prop。
- $ref注重于索引，主要用来调用子组件里的属性和方法，其并不擅长数据传递；而ref用在DOM元素时，能当做选择器的使用，这个功能比作为索引更常用到。
3、通过$emit实现通信
上面两种方法主要是父组件向子组件通信，而通过
emit在官网上解释的很朦胧，按我的理解，就是子组件中的$emit就是发送参数，父组件中的“@关键名”就是接受参数，然后基于这个逻辑丰富代码，实现想要的功能效果。
//父组件
<template>
<div>
<img src="../../assets/img.jpeg">
<h1>{{msg}}</h1>
<child @getMessage="showMsg"></child>
</div>
</template>
<script>
import Child from './child'
export default {
name: "father",
components: {
Child
},
data() {
return {
msg: ''
}
},
methods:{
showMsg(msg){
this.msg = msg;
}
}
}
</script>
//子组件
<template>
<div>
<h3>我是子花花!~</h3>
</div>
</template>
<script>
export default {
name: "child",
mounted(){
this.$emit('getMessage','我是父花花@-@');
}
}
</script>
效果图4
