App.vue文件

<template>

? <div class="mainbox">

? ? <!-- 1.在原生组件(就是html标签)中 ?事件是由系统来设计触发条件的: -->

? ?<button @click="change">点击</button>

? ?<!-- 自定义组件：在自定义组件中,事件是由自己来设计什么时候触发的: -->

? ?<tbox v-on:myevent="fn"></tbox>

? ?<!-- 变成原生组件：+ .native -->

? ?<box2 v-on:click.native="fn2"></box2>

? ?<!-- 自定义组件 -->

? ?<box3 v-on:click="fn3"></box3>

? </div>

</template>

<script>

import tbox from "./components/tbos.vue"

import box2 from "./components/box2.vue"

import box3 from "./components/box3.vue"

export default {

? components:{

? ? tbox,

? ? box2,

? ? box3

?

?

},

methods:{

? //事件的三要素: 事件源 target ?事件类型type ?监听器handler

? change(){console.log("666666")},

? fn(){

? ? // tbox组件是时间源 myevent是tbox组件绑定的事件类型 ，fn是tbox绑定的监听器

? ? // fn要myevent触发了救护运行 myevent事件什么条件下才会触发？

? ? // myevent由tbox组件内部自己设计 什么时候触发

? ? console.log("fn函数调用")

? },

? fn2(){

? ? console.log("fn2函数调用")

? },

? fn3(){

? ? console.log("fn3函数调用")

? }

}

}

</script>

<style>

.mainbox{

? width: 300px;

? height: 300px;

? border: 1px solid black;

? margin: 0 auto;

}

</style>

?

tbos.vue文件

<template>

? ? <div>

? ? ? ? <p>box</p>

? ? ? ? <button @click="x">box</button>

? ? </div>

</template>

<script>

export default {

? ? data() {

? ? ? ? return {

? ? ? ? }

? ? },

? ? methods: {

? ? ? ? x(){

? ? ? ? ? ? this.$emit("myevent")//这个代码放在你想触发自定义事件的地方

? ? ? ? }

? ? ? ?

? ? }

}

</script>

?

?

bos2.vue文件

<template>

? ? <div>

? ? ? ? <p>box2</p>

? ? ? ? <button>box2</button>

? ? ? ?

? ? </div>

</template>

?

bos3.vue文件

<template>

?<div>

? ? <p>box3</p>

? ? <button @click="x">box3</button>

?</div>

</template>

<script>

export default {

? ? methods: {

? ? ? ? x(){

? ? ? ? ? ? this.$emit("click")//这个代码放在你想触发自定义事件的地方

? ? ? ? }

? ? ? ?

? ? }

}

</script>

?