为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第19天-vue3.0实现todolist

第一模块

课程名称:vue3.0实现todolist

章节名称:

  • 4-5 父子组件传参

讲师姓名:五月的夏天

第二模块

课程内容(概述)

1、讲解父组件如何传参给子组件,子组件如何传参给父组件

第三模块

介绍

在上一篇文章中,老师讲解了如何在父子组件传递参数。在本篇文章中补充下其它方式传递参数。在 Vue3中除了可以使用ctx.emit分发事件、绑定属性方式传参,还可以使用 Bus总线-EventBus 进行组件通信,在Vue3 中使用 **mitt**模块来实现。

安装

npm install mitt--save

使用

在项目下新建文件utils/event-bus.js,添加以下代码

// event-bus.js
import mitt from 'mitt'
export default mitt()
<!-- Home.vue -->
<template>
    <div>
        <About />
        <p>接收传递过来的参数:{{message}}</p>
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import eventbus from '@/utils/event-bus.js'
import About from '@/components/About.vue'
export default defineComponent({
    name: 'Home',
    components: {
        About,
    },
    setup() {
        const msssage = ref(null)
        // 监听组件传递的参数
        eventbus.on('on-lisent', (result) => {
            message.value = result.aaa
        })
        
        return {
            msssage
        }
    }
})
</script>
<!-- About.vue -->
<template>
    <div>
        --------------------------
        <button type="button" @click="onSendMessage">传递参数给父组件</button>
        --------------------------
    </div>
</template>
<script>
import { defineComponent } from 'vue'
import eventbus from '@/utils/event-bus.js'
export default defineComponent({
    name: 'About',
    setup() {
        const onSendMessage = () => {
            eventbus.emit('on-lisent', { aaa: '111' })
        }
        return {
            onSendMessage
        }
    }
})
</script>

mitt api说明

all:事件名称到已注册处理程序函数的映射。

on:为给定类型注册一个事件处理程序。

  • 参数 Parameters
  • type ( string | symbol ) 要侦听的事件类型或’*'所有事件
  • handler 函数响应给定事件调用的函数

off:删除给定类型的事件处理程序。如果handler省略,则删除给定类型的所有处理程序。

  • 参数 Parameters

  • type (字符串|符号)要取消注册的事件类型handler,或’*’

  • handler Function 要删除的处理程序函数

第四模块

学习截图
图片描述
图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消