【金秋打卡】第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 要删除的处理程序函数

第四模块

学习截图