Vue-组件的自定义事件

---

什么是组件中的自定义事件

顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。也是一种组件间的通信方式，适用于子组件==>父组件。

因为通过属性传值是单向的,有时候我们需要子组件的data 数据交给父组件使用:
通过在子组件上定义自定义事件，在子组件中通过$emit 来触发事件；子组件的事件被触发并传参，事件处理函数可以接收到子组件的数据；事件绑定的事件处理函数在父组件上，故可在事件处理函数中用到子组件的数据值来修改父组件的数据。

事件的三要素为: 事件源 target 事件类型type 监听器handler
同样自定义事件也是这三要素
基本语法：

//父组件中:
<box @myevent="handleEvent"></box>
//box为子组件 ,                    事件源
//myevent是事子组件的自定义事件     事件类型
//handleEvent是绑定的父组件的方法   监听器


子组件中:
在任意业务中触发事件:this.$emit("myevent","要给父组件传的数据")

案例

//父组件App.vue文件中
<template>
  <div v-cloak class="App">
    <!-- 注意不能以用官方的事件命名 -->
    <box1 @myclick="fn"></box1>
    <h1>{{obj.name}}</h1>
  </div>
</template>
<script>
import box1 from "@/components/box1.vue"
export default {
  data() {
        return {
          obj:{}  //这里必须写个变量接受数据，如果直接在函数里面设置obj来接受，会导致一加载时读取网页中{{obj.name}}报错,找不到obj这个对象
        }
      },
      components:{
         box1,
      },
      methods: {
         fn(el){
          console.log(el)
          this.obj=el
         }
      },
}
</script>

//子组件box1.vue中
<template>
    <div>
       <button @click="box1">点击给父组件传值</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: {name:"ljy",age:21}
            }
        },
        methods: {
            box1(){
                //触发自定义事件
                this.$emit('myclick',this.msg)
            }
        },
    }
</script>

当我们点击时：