一、什么是自定义事件？

自定义事件是 Vue 组件间通信的一种机制。
子组件通过 this.$emit('事件名', 数据) 触发一个事件。
父组件监听这个事件并执行相应的逻辑。

二、基本使用

准备工作

demo 继续使用笔记8中的链接为demo

在views文件夹下创建新的文件夹为customevent

在customevent文件夹下

创建文件Parent.vue

<template><div class="props-text"><h1>custom event  自定义事件</h1><h1>我是父组件</h1></div>
</template>
<script setup></script><style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

添加路由

import {createRouter , createWebHistory} from 'vue-router'
const routes = [{path: '/',name: 'index',component: () => import('@/views/index.vue')},{path: '/props',name: 'props',component: () => import('@/views/props/Parent.vue')},{path: '/customevent',name: 'customevent',component: () => import('@/views/customevent/Parent.vue')},]const router = createRouter({history: createWebHistory(),routes
})
export default router

在APP.vue 中添加导航

<script setup></script><template>
<div class="com"><h1>各种Vue组件间通信/传值</h1><div><h2 style="display: inline">演示:</h2>&nbsp;&nbsp;<router-link to="/">index</router-link>&nbsp;&nbsp;<router-link to="/props">props</router-link>&nbsp;&nbsp;<router-link to="/customevent">custom event</router-link>&nbsp;&nbsp;</div><br><router-view></router-view></div>
</template><style  scoped>.com {margin: 10px;}</style>
<style>.box {border: solid 1px #aaa;margin: 5px;padding: 5px;}
</style>

当父组件想给子组件绑定一个原生dom事件时

创建子组件1

在customevent文件夹下

创建文件Child1.vue

<template><div><div class="child1"><div class="child1-title">Child1</div></div></div>
</template>
<script setup></script>
<style scoped>.child1{background-color: red;height: 100px;width: 100px;}.child1-title{color: white;}</style>

在父组件中引用子组件1

<template><div class="props-text"><h1>custom event  自定义事件</h1><h1>我是父组件</h1><hr><!--vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件vue3框架下面写法其实即为原生DOM事件vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件 --><Child1 @click="handler2(1,2,$event)"></Child1></div>
</template>
<script setup>
import Child1 from './Child1.vue'const handler1 = () => {console.log('父组件点击了')
}const handler2 = (a,b,$event) => {console.log(a,b,$event)
}
</script><style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

效果展示：

此时handler2自定义事件点击子组件任意地方都可触发

例如在子组件1中添加一个按钮

子组件代码

<template><div><div class="child1"><div class="child1-title">Child1</div><button>点我也触发</button></div></div>
</template>
<script setup></script>
<style scoped>.child1{background-color: red;height: 100px;width: 100px;}.child1-title{color: white;}</style>

点击按钮时控制台输入的结果是一样的

当子组件想给父组件传递信息时使用自定义事件

创建子组件2

<template><div><div class="Child2"><div class="Child2-title">Child2</div><button @click="handler">点击我触发方法xxx</button></div></div>
</template>
<script setup>
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx'])const handler = ()=>{//第一个参数:事件类型 第二个|三个|N参数即为注入数据$emit('xxx','参数1','参数2');
}</script>
<style scoped>.Child2{background-color: red;height: 100px;width: 100px;}.Child2-title{color: white;}</style>

defineEmits 是 Vue 3 中用于在 Composition API（组合式 API）中定义组件所触发的事件的一种方式，尤其是在使用 <script setup> 语法时非常常见。

作用：

defineEmits 允许你声明一个组件可以向外触发的自定义事件。它返回一个函数，你可以用这个函数来触发事件并传递参数。

defineEmits 接收一个数组，数组中的每一项是组件会触发的事件名。
emit 是一个函数，用于触发这些事件，并传递数据。

父组件注入子组件2

<template><div class="props-text"><h1>custom event  自定义事件</h1><h1>我是父组件</h1><hr><!--vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件vue3框架下面写法其实即为原生DOM事件vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件 --><Child1 @click="handler2(1,2,$event)"></Child1><hr><!-- 自定义事件  --><Child2 @xxx="handler3" @click="handler4"></Child2></div>
</template>
<script setup>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'const handler1 = () => {console.log('父组件点击了')
}
const handler2 = (a,b,$event) => {console.log(a,b,$event)
}const handler3 = (paramsa,paramsb) => {console.log(paramsa,paramsb)
}const handler4 = () => {alert('Dom原生事件 被触发了');
}</script><style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

控制台输出

并且弹框弹框内容为 Dom原生事件被触发了

如果你在组件2中 click添加到自定义事件则click原生dom变成了自定义事件

子组件代码

<template><div><div class="Child2"><div class="Child2-title">Child2</div><button @click="handler">点击我触发方法xxx</button></div></div>
</template>
<script setup>
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx','click'])const handler = ()=>{//第一个参数:事件类型 第二个|三个|N参数即为注入数据$emit('xxx','参数1','参数2');
}</script>
<style scoped>.Child2{background-color: red;height: 100px;width: 100px;}.Child2-title{color: white;}</style>

再次点击父组件的时候弹框没有了