Vue父子通信 $emit 学习笔记

在学习vue之父子组件间通信时看到了四小七的文章《vue之父子组件间通信实例讲解（props、$ref 、 $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 前后位置不限。