vue中的父子组件之间的通信

最近想总结一下vue父子组件之间的通信，所以记录一下。我只写部分伪代码，未写全部代码。

简单的点击事件的传递值：见1，2的写法。

复杂的点击事件的传递值：见3，4的写法。3，4的用法也可以用于兄弟组件之间的传值。注意，用在父子组件之间的传值与用在兄弟组件之前传值稍微有些不用。

1、父组件向子组件传递数据，用props即可。

具体例子：点击删除按钮，弹出来删除弹框

父组件传递数据：

<delete-Dialog :is-show="isShowDialog" :invoice-id="invoiceId" :owner="owner" @show="parentShow" />

子组件接收数据：

props: {

isShow: {

type: Boolean

},

invoiceId: {

type: String,

default: ''

},

owner: {

type: String,

default: ''

}

},

2、子组件向父组件传递数据，用$emit

子组件向父组件传递数据：

<el-button type="primary" @click="sure">确定</el-button>

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、父组件向子组件传递数据

<el-button type="primary" @click="sure">确定</el-button>

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的属性并赋值。

父组件：

<test ref="mytest"></test>

<el-button type="primary" @click="parentMethods">确定</el-button>

data() {
      return {
        sss: "测试测试"
      }
    },
    methods: {调用子组件的方法，mytest是ref值，childMethods是父组件要调用的子组件的方法
      parentMethods(){
          this.$refs.mytest.childMethods(this.sss)
      }
    }

子组件：

methods: { childMethods(msg){ console.log('父组件调用子组件方法传递过来的数据'+msg) }

 

以上是我的一些总结～本人小菜鸟一个，如有问题，欢迎大家批评指正哈～