事件的三要素：
事件源target、事件类型type、监听器hander
组件的自定义事件：
就是自己创建的事件，包含事件名，事件回调等，定义好之后去给组件使用。也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。
-
在根组件中给子组件标签绑定自定义事件（
<Box1 v-on:myevent="fn1"></Box1>），创建一个方法（监听器：fn1），在自定义事件触发后调用这个函数。 -
在子组件内部定义事件类型，当满足事件触发的条件（条件是自己定义的）后，就去触发组件内的事件（
this.$emit("自定义事件名",传值给根组件内定义的方法)），然后监听器就会去做处理。
使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
我们发现在组件标签内绑定原生事件，原生事件是不会触发的（因为它自动把原生事件当做了自定义事件）！ ！ ！
如果我们想在某个组件的根元素上监听一个原生事件。就可以使用 .native 修饰 v-on。（<Box1 @click.native="fn3"></Box1>）
根组件App.vue文件：
<template>
<div>
<button @click="clicked">点击</button>
<p>hello</p>
<!-- 在组件标签上绑定自定义事件 ：myevent-->
<Box v-on:myevent="fn"></Box>
<!-- 组件标签上绑定原生事件click,我们会发现点击了也是无法触发原生事件的 -->
<Box v-on:click="fn3"></Box>
<!--
如果，我们想要在组件标签内，触发绑定的原生事件，就在事件后面接一个.native就行了。
接了以后，我们就会发现无论点击组件Box内的任何标签，都会触发这个点击事件（原生事件）
-->
<!-- <Box @click.native="fn3"></Box> -->
</div>
</template>
<script>
import Box from "@/components/BoxHe.vue"
export default {
components: {
Box },
methods:{
clicked(){
// 事件的三要素：事件源`target`、事件类型`type`、监听器`hander`
// 事件源：button 事件类型：点击事件 监听器：clicked函数
console.log("原生事件触发了");
},
fn(){
console.log("自定义事件触发了1",arguments)
// Box组件是事件源 myevent是Box组件绑定的事件类型
// fn是Box组件上面绑定的监听器
// fn在myevent触发后，就会运行。
// 那myevent事件在什么条件下才会触发？
// myevent由Box组件内部自己设计————什么时候触发
// 比如：
},
fn3(){
console.log(33333)
}
}
}
</script>
<style>
</style>
子组件BoxHe.vue文件：
<template>
<div>
<button @click="add">增加</button>
<p>{{count}}</p>
</div>
</template>
<script>
export default {
data(){
return {
count:0
}
},
methods:{
add(){
this.count++
}
},
watch:{
// 侦听数据源
count(v){
if(v==5){
// 当count的值为5时，
// 触发组件内的事件：$emit("事件",传值)
this.$emit("myevent",890)
}
}
},
mounted(){
// 当根组件内的Box标签加载完毕，就触发自定义事件
this.$emit("myevent")
}
}
</script>
<style>
</style>
