详细分析Vue3中的emit用法(子传父)

详细分析Vue3中的emit用法(子传父)

码农世界 2024-05-28 前端 69 次浏览 0个评论

目录

  • 1. 基本知识
    • 1.1 emit
    • 1.2 defineEmits
    • 2. Demo

      1. 基本知识

      在 Vue 3 中,emit 是一种机制,用于在子组件中触发事件,并在父组件中监听这些事件

      提供一种组件间通信的方式,尤其是在处理父子组件数据传递和交互时非常有用

      一共有两种方式

      1.1 emit

      子组件中使用emit

      
      
      

      父组件监听子组件:

      
      
      

      1.2 defineEmits

      在 Vue 3 中,还可以使用 Composition API 的 defineEmits 方法来定义和使用 emit

      子组件中定义和使用emit:

      
      
      

      父组件监听子组件:

      
      
      

      2. Demo

      完整Demo如下:

      1. 创建子组件:
      
      
      
      1. 创建父组件:
      
      
      
      1. 应用组件:
      
      
      

      主入口文件:

      import { createApp } from 'vue';
      import App from './App.vue';
      createApp(App).mount('#app');
      

转载请注明来自码农世界,本文标题:《详细分析Vue3中的emit用法(子传父)》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,69人围观)参与讨论

还没有评论,来说两句吧...

Top