在学习vue之父子组件间通信时看到了 四小七 的文章 《vue之父子组件间通信实例讲解(props、$ref 、 $emit )》文章,收益匪浅。但是对于$emit说明还是比较少,后来再查查资料总结内如如下:
(以下引用 四小七 文章)
通过$emit 实现通信
上面两种示例主要都是父组件向子组件通信,而通过$emit 实现子组件向父组件通信。
对于$emit官网上也是解释得很朦胧,我按我自己的理解是这样的:
vm.$emit( event, arg )
$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
简单来说父组件在引用的子组件元素上绑定一个自定义方法,并且指向一个方法:
<child @getMessage="showMsg"></child>
在父组件的 methods 中定义一个方法
showMsg(title){ this.title=title; }
在子组件中可以通过$emit触发 父组件的自定义方法,触发方式可以直接执行,或者是通过绑定事件
this.$emit('getMessage', '我是父组件!')
@click="$emit('getMessage', '我是父组件!')"
$emit 包括两个参数,第一个是父组件定义的自定义方法,第二个是传给这个自定义方法的参数
以上是引用,从上面可以看到子组件触发父组件的自定义方法并且传参,但是有个两个问题。
1,子组件如何传多个参数。
2,父组件和子组件如何在同时同一个方法中传参。
通过参考
了解到父子组件可以通过arguments参数来接收子组件的参数。并且子组件的参数为数组形式。
父组件
<child v-for="(item, index) in data" @custom="parentMethod(index, arguments)"></child>
子组件
this.$emit('custom', arg1, arg2);
父组件获取到的 arguments参数为数组 [arg1,arg2],父组件的参数 index和arguments 前后位置不限。