自定义事件的基本使用

学习笔记

解决问题：子组件给父组件传递数据

1.首先也可以用props方法进行实现。但在传递数据之前，父组件还是要先给子组件传递一个函数来做载体，然后子组件用props接受这个函数，然后在子组件操作使用这个函数就可以在父组件里接收到子组件的数据了。（因为函数本体是在父组件里的，子组件就拿过去接收自己的数据了，因此父组件在子组件使用后就接收到了）

2.就可以通过自定义事件的方式来进行子组件给父组件传数据了。首先要给子组件绑定事件就在子组件后面使用v-on或@形式自己定义一个事件@xxx=""名字自己定义，然后和上面的一样加入一个方法，但子组件不需要去接受这个方法，只需要触发事件就行。每当子组件触发这个事件就会调用这个方法，感觉和1比起来差不多。然后子组件里使用this.$emit("xxx",传入想要父组件得到子组件的数据)去触发这个事件，触发后，方法就会接受传过来的参数通过方法输出给父组件。

3.还可以用ref方式。设置ref：a，因为this.$refs.a是获取该子组件的vc实例对象，因此可以在父组件获取子组件的实例对象后给它绑定事件（可以在mounted里面写，即挂载完成后执行），使用this.$refs.a.$on("xxx",父组件里的回调函数)，意思为绑定事件xxx,当xxx事件被触发时，使用回调函数。但子组件也要和2一样使用this.$emit("xxx",传入想要父组件得到子组件的数据)去触发这个事件。

3比2要复杂，但是3可以实现2不能实现的，比如触发事件后需要几秒执行，定时器的使用，3就可以在mounted里加入定时器，然后定时器里面写this.$refs.a.$on("xxx",父组件里的回调函数)。但2在解析模板时因为绑定事件就在标签上，会瞬间就直接触发了，而3它是在下面的实例对象里，灵活性更强