本页目录
```html
<!-- ParentComponent.vue -->
<template>
<div>
<h1>Parent Component</h1>
<ChildComponent @custom-event="handleCustomEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleCustomEvent(payload) {
console.log('Event triggered from child:', payload);
},
},
};
</script>
```
在这个例子中，父组件`ParentComponent.vue`引入了子组件`ChildComponent.vue`并监听了一个自定义事件`custom-event`。当这个事件被触发时，`handleCustomEvent`方法将被调用。
```html
<!-- ChildComponent.vue -->
<template>
<div>
<h2>Child Component</h2>
<button @click="emitCustomEvent">Trigger Custom Event</button>
</div>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup(_, { emit }) {
const count = ref(0);
function emitCustomEvent() {
count.value++;
emit('custom-event', count.value);
}
return {
emitCustomEvent,
};
},
});
</script>
```
在子组件`ChildComponent.vue`中，我们使用了组合式API的`setup()`函数。我们在这里定义了一个响应式引用`count`以及一个方法`emitCustomEvent`。当用户点击按钮时，`emitCustomEvent`方法将被调用，它会更新`count`的值并通过`emit`方法触发`custom-event`事件，同时传递`count.value`作为有效载荷。这将导致父组件的`handleCustomEvent`方法被调用，有效载荷将被打印到控制台。
这个示例展示了如何使用Vue 3的组合式API和`emit`方法在子组件中触发父组件的方法。
Related
相关文章
2025年06月10日
前端
gemini-2.5-pro-0605 按图生成html效果测试
Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具，但这次它的“图生 HTML”功能确实让我眼前一亮——上传一张设计图，它不仅能快速识别布局和元素，还能生成结构清晰、样
2025年03月14日
前端
css flex-1和overflow-hidden结合使用详解：弹性布局与内容溢出控制
在 Flexbox 布局中，flex: 1 和 overflow: hidden 是两个常用的属性，它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用：当子元素设置 flex: 1 时，它会根据 Flex 容器的主轴方向，自动伸缩以填充剩余的可用
2025年03月13日
前端
Vue 3中实现处理后的v-model双向绑定
在Vue 3中，当你需要对v-model传入的值进行处理后再展示或使用时，可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性，在getter中处理展示值，在setter中处
