- 综合排序
- 最热优先
- 最新优先
- 来自专栏飞鸟的专栏
vue 组件自定义事件
$emit('custom-event', data);在上面的示例中，我们使用$emit方法发送一个名为custom-event的自定义事件，并传递了data作为数据。 下面是一个示例，展示了如何在组件中监听自定义事件：<template>
Parent Component
<child-component @custom-event { handleEvent(data) { // 处理自定义事件的响应 console.log(data); } }};</script>在上面的示例中，我们使用@custom-event 来监听子组件中发出的custom-event自定义事件，并将其绑定到handleEvent方法上。 $emit('custom-event', data); } }};</script>在上面的示例中，父组件通过监听子组件的自定义事件custom-event来接收数据。1K00编辑于 2023-05-21来自专栏飞鸟的专栏vue事件处理
-- 子组件 --><button @click="$emit('<em>custom-event</em>', data)">Click me</button>在子组件中，我们使用$emit方法触发一个名为custom-event -- 父组件 --><template>
<ChildComponent @custom-event="handleCustomEvent"></ChildComponent> < $on('custom-event', this.handleCustomEvent); }, methods: { triggerCustomEvent() { this. $emit('custom-event', data); }, handleCustomEvent(data) { // 处理自定义事件 } }}</script>在上述示例中 ，我们在Vue实例的created钩子函数中使用$on方法来监听自定义事件custom-event，并在相应的处理函数handleCustomEvent中处理该事件。72210编辑于 2023-05-20来自专栏编程微刊在 Vue 中，子组件如何向父组件传递数据？
$emit('custom-event', data); } } } </script> 子组件中的 sendDataToParent 方法通过 $emit 触发了一个名为 'custom-event <template>
<child-component @custom-event="handleCustomEvent"></child-component> <div methods: { handleCustomEvent(data) { this.receivedData = data; } } } </script> 父组件通过使用 @custom-event2.9K30编辑于 2023-09-03vue设计模式总结-vue中主要用到了那些设计模式-面试篇
$emit('custom-event', { message: 'Hello from parent' }); } } } </script> 子组件模板： <template> <div $on('custom-event', this.handleEvent); }, methods: { handleEvent(data) { // 接收并处理事件数据 this.receivedMessage = data.message; } } } </script> 在这个例子中，父组件通过 $emit 方法发布一个名为 custom-event 的事件 子组件通过 $on 方法订阅了 custom-event 事件，并在收到事件时执行 handleEvent 方法来更新接收到的消息。
1K10编辑于 2024-03-14来自专栏猫头虎博客专区Vue组件通信原理及应用场景解析
在父组件中： <template> <button @click="sendMessage">发送消息给子组件</button> <child-component @custom-event=" $emit('custom-event', 'Hello from parent!') $on('custom-event', this.handleCustomEvent); }, methods: { handleCustomEvent(message) { $emit('custom-event', 'Hello from child!') ; } } }; </script> 在这个例子中，子组件通过$emit('custom-event', data)触发了一个名为custom-event的自定义事件，并将'Hello from
65010编辑于 2024-04-08来自专栏前端开发除了循环引用，Vue3还有哪些常见的性能优化技巧？
onUnmounted, onMounted } from 'vue'export default { setup() { onMounted(() => { eventBus.on('custom-event ', handleEvent) }) onUnmounted(() => { eventBus.off('custom-event', handleEvent) })
41910编辑于 2025-07-30从Java到Vue全栈开发的实战之路：一场真实面试中的技术碰撞
props: { user: { type: Object as PropType<User>, required: true } }, emits: ['custom-event '], setup(props, { emit }) { const handleClick = () => { emit('custom-event', props.user) props: { user: { type: Object as PropType<User>, required: true } }, emits: ['custom-event '], setup(props, { emit }) { const handleClick = () => { emit('custom-event', props.user)
18810编辑于 2025-10-19来自专栏前端自习课【Vue】1564- 8 个很棒的 Vue 开发技巧
$emit( custom-event , some value ) } } } <template>
<my-item v-for="(item , index) in list" @custom-event="customEvent(index, $event)"> </my-list></template87510编辑于 2023-02-13来自专栏北京百思可瑞教育北京百思可瑞教育：Vue.js基础，监听子组件事件（v-on）与绑定子组件数据（v-model）
-- 父组件 --><template> <ChildComponent @custom-event="handleCustomEvent" /></template><script>import ChildComponent $emit('custom-event', { message: '来自子组件的数据' }); } }}</script>1.2 事件修饰符的增强能力Vue提供了一系列事件修饰符，可简化事件处理逻辑
26910编辑于 2025-09-05来自专栏前端博客vue2升级vue3： Event Bus 替代方案
$on('custom-event', () => {//TODO})eventBus. $emit('custom-event')但是，vue3移除了We removed $on, $off and $once methods from the instance completely.
2K20编辑于 2022-07-30来自专栏前端Q8 个很棒的 Vue 开发技巧
$emit( custom-event , some value ) } } } <template>
<my-item v-for="(item , index) in list" @custom-event="customEvent(index, $event)"> </my-list></template74420编辑于 2023-01-09来自专栏前端到底怎么学好来【Vue原理解析】之组件系统
$emit('custom-event', 'Hello from child component!') 我们还定义了一个名为 emitCustomEvent 的方法，它会在按钮点击时被调用，并触发一个名为 custom-event 的自定义事件，并将一条消息传递给父组件。
49530编辑于 2023-11-15来自专栏逆锋起笔10 个 Vue 开发技巧，助力成为更好的工程师！
$emit('custom-event', 'some value') } } } 复制代码 App.vue <template>
<my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)"> </my-list>2.1K10发布于 2020-06-17从零到一：一个Java全栈工程师的面试实战分享
defineProps, defineEmits } from 'vue'; const props = defineProps(['message']); const emit = defineEmits(['custom-event ']); const sendToParent = () => { emit('custom-event', '这是子组件发送的数据'); }; </script> ``` ### Spring
26310编辑于 2025-08-21来自专栏歪码行空9个Vue开发技巧助力成为更好的工程师
$emit('custom-event', 'some value') } } } App.vue <template>
<my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)"> </my-list>4.5K20发布于 2020-04-16Vue 组件实例
实例 <button @click="$emit('<em>custom-event</em>', eventData)">Click me</button> $nextTick() $nextTick() 方法在下次
26510编辑于 2025-12-16从Java全栈工程师视角看互联网大厂面试：技术、逻辑与实战
$emit('custom-event', 'Hello from child'); } } } </script> ``` **面试官**：这个例子非常清晰，说明你对Vue的事件机制理解得不错
24010编辑于 2025-08-26来自专栏猫头虎博客专区Vue.js入门指南：从基础到进阶，掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
$emit('custom-event', 'Hello from child component!'); } } } </script> <! -- ParentComponent.vue --> <template>
<child-component @custom-event="handleCustomEvent"> (data) { this.message = data; } } } </script> 在上面的示例中，ChildComponent组件中的按钮点击事件会触发一个自定义事件custom-event 在ParentComponent中，我们使用v-on监听custom-event事件，并在事件处理方法中获取传递的数据，并将数据显示在页面上。3.9K20编辑于 2024-04-08来自专栏前端达人聊一聊如何在Vue中使用事件总线（ Event Bus）进行组件间通信
"; import { onMounted, ref } from "vue"; const message = ref("") onMounted(()=> { eventBus.on('custom-event
2K40编辑于 2023-10-21来自专栏云云众生s如何为React Native应用插桩以发送OTel信号
addEvent("custom-event", {custom: "walkthrough-event"}); setTimeout(() => { span?.
1.5K00编辑于 2025-03-02腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号