vue3 子组件触发父组件事件

原创已于 2023-07-25 14:11:21 修改 · 953 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-07-25 14:08:46 首次发布

vue3 专栏收录该内容

2 篇文章

订阅专栏

该文章展示了在Vue中如何进行父子组件间的通信。父组件通过在模板中使用`<children@handleEmit=onmyclick/>`监听子组件的`handleEmit`事件，而子组件利用`defineEmit`定义并触发这个事件，从而实现信息的传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template> 
	<div>我是父组件</div>
  	<children @handleEmit="onmyclick"/>
</template> 
<script setup>
import children './components/children.vue'; 
const onmyclick = () => {
  console.log("我被子组件触发了");
} 
</script>

子组件

<template>
	<div>我是子组件</div>
    <button @click="emitclick">点我触发</button>
</template>
<script setup>
import { defineEmit } from 'vue'  
// 定义事件
const emit = defineEmit(['handleEmit']);
const emitclick = () => {
  emit('handleEmit'); 
} 
</script>