Vue3组件化开发（二）

2024-04-09 16:50:03

一、非父子组件的通信

在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。
这里我们主要讲两种方式：
Provide/Inject；
pMitt全局事件总线；

1. Provide和Inject
Provide/Inject用于非父子组件之间共享数据：
比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；
在这种情况下，如果我们仍然将props沿着组件链逐级传递下
去，就会非常的麻烦；
对于这种情况下，我们可以使用 Provide 和 Inject ：无论层级结构有多深，父组件都可以作为其所有子组件的依赖
提供者；
父组件有一个 provide 选项来提供数据；
子组件有一个 inject 选项来开始使用这些数据；
实际上，你可以将依赖注入看作是“long range props”，除了：
父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里

2.Provide和Inject基本使用

3.Provide和Inject函数的写法

4.处理响应式数据

5.全局事件总线mitt库
Vue3从实例中移除了 o n 、 on、 on、off 和 $once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库：
Vue3官方有推荐一些库，例如 mitt 或 tiny-emitter；这里我们主要讲解一下mitt库的使用；
首先，我们需要先安装这个库：
npm install mitt

6.使用事件总线工具

7.Mitt的事件取消

二、认识插槽Slot

1.如何使用插槽slot？

2.插槽的基本使用

3.插槽的默认内容

4.多个插槽的效果

5.具名插槽的使用

6.动态插槽名

7.具名插槽使用的时候缩写

8.渲染作用域

9.认识作用域插槽

10.独占默认插槽的缩写

11.默认插槽和具名插槽混合

Vue3组件化开发（二）相关推荐

Vue3.x全家桶之Vue组件化开发(二)
✍灬更新说明更新时间:2022-1-03 更新内容: Vue2.x 更新至 Vue3.x Demo与文件.截图演示齐全保留了Coderwhy老师Vue2.x的精华部分,添加Vue3.x的内容在V ...
vue3组件化开发常用API
组件化思想为什么使用组件化开发? 当前前端比较流行的 Vue React 等框架,都会通过编写组件来完成业务需求,也就是组件化开发.包括小程序开发也会用到组件化开发的思想. 分析组件化思想开发应用程 ...
Vue3 - 组件化开发父子传值
查漏补缺,温故知新父子组件之间如何进行通信? 父组件传递给子组件:通过props属性子组件传递给父组件:通过 $emit 触发事件使用场景父组件有些数据,需要子组件进行展示什么是Props? ...
我的react组件化开发道路(二) 分页组件开发
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章主要写了关于react组件化开发的一些基本配置,慢慢的深入到每个组件的详细介绍中,今天我们就来分享react的分页组 ...
【Vue】Vite 组件化开发
文章目录组件化开发一.组件化开发思想二.Vue 组件的构成 2.1 组件组成结构 2.2 组件 template 节点 2.2.1 在 template 中使用指令 2.2.2 在 templa ...
iOS 的组件化开发
2019独角兽企业重金招聘Python工程师标准>>> 在一个APP开发过程中,如果项目较小且团队人数较少,使用最基本的MVC.MVVM开发就已经足够了,因为维护成本比较低. 但是当 ...
iOS组件化开发实践
目录: 1.组件化需求来源 2.组件化初识 3.组件化必备的工具使用 4.模块拆分 5.组件工程兼容swift环境 6.组件之间的通讯 7.组件化后的资源加载 8.OC工程底层换swift代码 9.总 ...
android组件化开发视频教程,教你打造一个Android组件化开发框架
作者简介本篇来自 lucky_billy 的投稿,分享了他的开源组件化框架,详细地讲解框架形成的思路,希望对大家有所帮助. lucky_billy 的博客地址: 解读开源框架设计思想 B站学习视频 ...
组件化开发 ——— 制作私有库
组件化开发 --- 制作私有库上篇文章大致说了组件化优缺点及内容,现在就针对公共基础组件制作私有库的问题继续搞起来. 我们的原则是:将一个项目组件化拆分掉,一般会拆分一些基础组件.一些功能组件和业务 ...

最新文章

热门文章