App.vue文件
<template>
<div class="mainbox">
<button @click="change">点击button>
<tbox v-on:myevent="fn">tbox>
<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>boxp>
<button @click="x">boxbutton>
div>
template>
<script>
export default {
data() {
return {
}
},
methods: {
x(){
this.$emit("myevent")//这个代码放在你想触发自定义事件的地方
}
}
}
script>
bos2.vue文件
<template>
<div>
<p>box2p>
<button>box2button>
div>
template>
bos3.vue文件
<template>
<div>
<p>box3p>
<button @click="x">box3button>
div>
template>
<script>
export default {
methods: {
x(){
this.$emit("click")//这个代码放在你想触发自定义事件的地方
}
}
}
script>