【金秋打卡】第19天-vue3.0实现todolist
2022/11/14 4:24:00
本文主要是介绍【金秋打卡】第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
要删除的处理程序函数
第四模块
学习截图
这篇关于【金秋打卡】第19天-vue3.0实现todolist的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南