浅谈$emit和$on的用法

$emit和$on主要解决的问题是事件的定义和消费。

我们可以用$on方法定义一个事件，并且指定事件的处理方法，

this.$on('getParam',this.handleParam)//this.$on('自定义事件名',处理方法) 

然后我们在$emit中消费这个事件

this.$emit('getParam','name')//this.$emit（'自定义事件名','要传送的数据'）

用通俗的话讲就是$emit负责发送数据$on负责接收数据。

下面我将用示例详细说明$on与$emit在父子组件中的应用

1.父组件

<template>
<!--  自定义事件childrenEvent，处理方法handleChildrenEvent-->
  <children @childrenEvent="handleChildrenEvent" />
</template>
<script>
export default {
name:'parent',
  data () {
   return {
       message:'父组件数据'
  },
  methods: {
   handleChildrenEvent(type) {
      console.log(this.message,type)
    }
  }
}
</script>

2.子组件

<template>
<div @click="handleData"></div>
</template>
<script>
export default {
name:'children',
  data () {
   return {
       data:'子组件数据'
  },
  methods: {
   handleData () {
      this.$emit('childrenEvent',this.data)//将data传回父组件
    }
  }
}
</script>

以上便是我对$emit和$on的一些理解和总结。