最近想总结一下vue父子组件之间的通信，所以记录一下。我只写部分伪代码，未写全部代码。
简单的点击事件的传递值：见1，2的写法。
复杂的点击事件的传递值：见3，4的写法。3，4的用法也可以用于兄弟组件之间的传值。注意，用在父子组件之间的传值与用在兄弟组件之前传值稍微有些不用。
1、父组件向子组件传递数据，用props即可。
具体例子：点击删除按钮，弹出来删除弹框
父组件传递数据：
子组件接收数据：
props: {
isShow: {
type: Boolean
},
invoiceId: {
type: String,
default: ''
},
owner: {
type: String,
default: ''
}
},
2、子组件向父组件传递数据，用$emit
子组件向父组件传递数据：
sure() {
//可以做一些其他的逻辑处理等
this.$emit('show', false) //将数据传递给父组件
//this.$emit('show', this.xxx)传递数组等数据给父组件
},
对于复杂事件的父子组件传值用bus.$on和bus.$emit但是注意：：on和emit事件必须是在一个公共的实例上才能触发。可以单独建立一个文件来写，也可以在main.js里面来写。两者选其一即可。
单独写：注意单独写的时候，用起来要记得引用。在使用的组件里面里 import bus from '这个地址写单独写的这个文件地址'
import Vue from 'vue'
export default new Vue()
main.js里面写：
export let bus = new Vue()
3、父组件向子组件传递数据
method:{
sure:function(){ bus.$on("testeventfunctionname",this.msg) }//msg就是要传的值父子组件
sure:function(){ bus.$emit("testeventfunctionname",this.msg) }//msg就是要传的值兄弟组件
}
4、子组件向父组件传递数据
created(){
bus.$emit("testeventfunctionname",(val)=>{回调函数使用箭头函数父子组件
this.childmsg = val//可以把传递过来的值赋值给子组件的数据
})
bus.$on("testeventfunctionname",(val)=>{回调函数使用箭头函数兄弟组件
this.childmsg = val//可以把传递过来的值赋值给子组件的数据
})
}
5、父组件调用子组件的方法，用$refs。给子组件写个ref的属性并赋值。
父组件：
data() {
return {
sss: "测试测试"
}
},
methods: {调用子组件的方法，mytest是ref值，childMethods是父组件要调用的子组件的方法
parentMethods(){
this.$refs.mytest.childMethods(this.sss)
}
}
子组件：
methods: { childMethods(msg){ console.log('父组件调用子组件方法传递过来的数据'+msg) }
【vue中的父子组件之间的通信】以上是我的一些总结～本人小菜鸟一个，如有问题，欢迎大家批评指正哈～
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的（）
- 前端|面试官（谈谈Vue和React的区别（））