Vue 自定义事件
2024年9月25日...大约 2 分钟
自定义事件允许子组件向父组件发送消息，从而实现父子组件之间的通信
基本用法
单文件组件
在子组件中，使用 defineEmits() 声明自定义事件
在父组件中，使用 v-on 或 @ 监听子组件的自定义事件
在子组件中，使用 $emit() (在模板中) 或 emit() 触发自定义事件，也可以传递参数
<!-- App.vue -->
<template>
{{ school }}
<!-- 监听子组件的自定义事件 -->
<Student @transfer-school="changeSchool"></Student>
</template>
<script setup>
import Student from './components/Student.vue'
import { ref } from 'vue'
const school = ref('QFNU')
// 可以接收子组件传递过来的参数
const changeSchool = (value) => {
if (value) {
school.value = value
} else {
school.value = 'THU'
}
}
</script><!-- Student.vue -->
<template>
<h1>{{ name }}</h1>
<!-- 在模板中使用 $emit 触发 -->
<button @click="$emit('transferSchool')">转学</button>
<button @click="handleClick">转学</button>
<!-- 使用 $emit 触发，并传递参数 -->
<button @click="$emit('transferSchool', 'PKU')">传参</button>
</template>
<script setup>
import { ref } from 'vue'
// 声明自定义事件
const emit = defineEmits(['transferSchool'])
const name = ref('John')
const handleClick = () => {
// 使用 emit 触发
emit('transferSchool')
}
</script>HTML
在子组件中，使用 emits 选项声明自定义事件
在父组件中，使用 v-on 或 @ 监听子组件的自定义事件
在子组件中，使用 $emit() (在模板中) 或上下文对象的 emit() 触发自定义事件，也可以传递参数
<body>
<div id="app">
{{ school }}
<!-- 监听子组件的自定义事件 -->
<Student @transfer-school="changeSchool"></Student>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import Student from './Student.js'
createApp({
components: {
Student
},
setup() {
const school = ref('QFNU')
// 可以接收子组件传递过来的参数
const changeSchool = (value) => {
if (value) {
school.value = value
} else {
school.value = 'THU'
}
}
return {
school,
changeSchool
}
}
}).mount('#app')
</script>
</body>// Student.js
import { ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
export default {
// 声明自定义事件
emits: ['transferSchool'],
setup(props, ctx) {
const name = ref('John')
const handleClick = () => {
// 使用上下文对象的 emit 触发
ctx.emit('transferSchool')
}
return {
name,
handleClick
}
},
template: `
<h1>{{ name }}</h1>
<!-- 在模板中使用 $emit 触发 -->
<button @click="$emit('transferSchool')">转学</button>
<button @click="handleClick">转学</button>
<!-- 使用 $emit 触发，并传递参数 -->
<button @click="$emit('transferSchool', 'PKU')">传参</button>`
}事件校验
在声明自定义事件时以对象的形式传入，可以指定事件的校验规则
事件可以被赋值为一个函数，接受的参数就是触发事件时传递的参数，返回一个布尔值来表明事件是否合法
{
emit名:(value)=>{
// 返回 true 表示事件合法，返回 false 表示事件不合法
}
}命名规范
声明自定义事件时，推荐使用小驼峰命名法 (camelCase)
父组件监听时，推荐使用短横线分隔命名法 (kebab-case)
Powered by Waline v3.3.2