ue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

• 子通信父

<template>
 <div class="parent">
 我是父组件
 <!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
 <!--通过:msg将父组件的数据传递给子组件-->
 <children :msg="msg" @say="parentSay"></children>
 </div>
</template>
<script>
import Children from './children.vue'
export default {
 data () {
 return {
 msg: 'hello, children'
 }
 },
 methods: {
 // 参数就是子组件传递出来的数据
 parentSay(msg){
 console.log(msg) // hello, parent
 }
 },
 // 引入子组件
 components:{
 children: Children
 }
}
</script>
<template>
 <div class="hello">
 <div class="children" @click="say">
 我是子组件
 <div>
 父组件对我说：{{msg}}
 </div>
 </div>
 </div>
</template>
<script>
 export default {
 //父组件通过props属性传递进来的数据
 props: {
 msg: {
 type: String,
 default: ()=> {
 return ''
 }
 }
 },
 data () {
 return {
 childrenSay: 'hello, parent'
 }
 },
 methods: {
 // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
 say(){
 this.$emit('say' , this.childrenSay);
 }
 }
 }
</script>

子组件使用$emit方法调用父组件的方法，达到子通信父的目的。

• 父通信子

 <!--Html-->
<template>
 <!--父组件触发click方法-->
 <div class="parent" @click="say">
 我是父组件
 <!--通过ref标记子组件-->
 <children ref="child"></children>
 </div>
</template>
<script>
import Children from './children.vue'
export default {
 data () {
 return {
 msg: "hello,my son"
 }
 },
 methods: {
 // 通过$refs调用子组件的parentSay方法
 say(){
 this.$refs.child.parentSay(this.msg);
 }
 },
 // 引入子组件
 components:{
 children: Children
 }
}
</script>
<template>
 <div class="hello">
 <div class="children" >
 我是子组件
 <div>
 父组件对我说：{{msg}}
 </div>
 </div>
 </div>
</template>
<script>
 export default {
 data () {
 return {
 msg: ''
 }
 },
 methods: {
 // 父组件调用的JavaScript方法parentSay
 parentSay(msg){
 this.msg=msg;
 }
 }
 }
</script>

父组件通过$refs调用子组件的方法。

以上就是父子组件通信的方式，父子组件传递数据直接用props，或者使用$emit和$refs依靠事件来传递数据。

您的关注是我最大的动力