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

最近想总结一下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)