vue3 子组件触发父组件事件

mini秀

已于 2023-07-25 14:11:21 修改

阅读量780

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

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

本文链接：https://blog.csdn.net/weixin_44088179/article/details/131916253

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

父组件

<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>