【收藏必备】8 张脑图快速了解 Vue 组件

「爱情、让人受尽委屈。」 2022-09-06 04:58 192阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![405d6a4424c792f4edbd961a38b3f1ee.png][]

# 前言 #

最近重新夯实`Vue3`

目前已经完结第一部分：\*\*基础部分\*\*\[1\]

本文是第二部分：**深入组件**

我将这部分内容吸收整理成`8`张脑图，一来可以快速了解`Vue3`组件，二来方便以后查看，具体如下????

# 脑图 #

## 注册组件 ##

⭐️无论是全局注册和局部注册，都是提供一个组件名和一个组件配置对象

![28a4e2c8853d56fa17ba4c055147a28c.png][] 1 注册组件.png

## 组件Props ##

⭐️组件的配置选项props作用是实现父子通信，而且它本质是proxy

![e0a2a7f7cc49481ecbb7414a53ead701.png][] 2组件Props.png

## 非属性特性 ##

⭐️非属性的特性指的是：组件中没有定义在`props`或`emits`选项中的特性，这些特性会有继承的特点

![48c211fea497ac64fa9534887a05ae1e.png][] 3非属性特性.png

## 自定义事件 ##

⭐️利用`props`可以实现父子通信，通过自定义事件我们可以实现子父通信，在子组件中通过`$emit()`派发事件并传递参数，在父级组件通过监听事件

![6474880e2964793390391c5818289b84.png][] 4自定义事件.png

## 插槽slot ##

⭐️插槽是一种内容分发技术，可以在组件模板中使用`<slot>`占位

![30f0389795c2c785455c312acf3c28c7.png][] 5插槽slot.png

## 依赖注入：Provide和Inject ##

⭐️作用是更方便的实现跨层级传参；用法是在祖辈上`Provide`，在后代上`Inject`

![4dc52e34c295e017b1f2d0f8e77af357.png][] 6依赖注入：Provide和Inject.png

## 动态组件和异步组件 ##

⭐️动态组件其实时通过`<component>`元素实现，通过它的`is`属性切换不同的组件；而异步组件的注册跟正常注册的注册类似，只是它是通过`defineAsyncComponent`方法定义一个异步组件配置

![518f3b3e18a377303d1bcc7f53b1a8a6.png][] 7动态组件和异步组件.png

## 模板引用和控制更新 ##

⭐️模板引用，使用ref属性为子组件或`HTML`元素指定引用`ID`，通过`this.$refs.xxx`获取到对应ID为`xxx`的组件或`HTML`元素；正常情形下，不用自己强制控制更新，因为有响应性系统，但极端情况下，可以使用`$forceUpdate`强制更新,但还是不推荐

![26f757249913389a71686b4b4c9631b8.png][] 8模板引用和控制更新.png

# 附件 #

我已将以上原图及源文件已上传`github`：github.com/jCodeLife/m…\[2\]

一来方便大家批量下载，二来可以根据自己的想法和习惯进行修改

# END #

以上是这次`Vue`组件相关的所有内容

如有问题，欢迎留言告知，感谢~

关于本文

# 来源：LBJ #

https://juejin.cn/post/6991289524915535908

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[405d6a4424c792f4edbd961a38b3f1ee.png]: /images/20220829/835e652982ba4385a61d6e7a0bfb6e0b.png
[28a4e2c8853d56fa17ba4c055147a28c.png]: /images/20220829/98e7f987f6b848e2b4e9838913a37a1e.png
[e0a2a7f7cc49481ecbb7414a53ead701.png]: /images/20220829/aa2c296ad5a8463b9d6443ecc38e9f58.png
[48c211fea497ac64fa9534887a05ae1e.png]: /images/20220829/8ffbe935a0e046469b01c19fe2e97373.png
[6474880e2964793390391c5818289b84.png]: /images/20220829/4b7921c1d04c462ab977868ce2398d79.png
[30f0389795c2c785455c312acf3c28c7.png]: /images/20220829/bcc56a9aa3cb436888fd29534592dedb.png
[4dc52e34c295e017b1f2d0f8e77af357.png]: /images/20220829/4ade452c6bf64ff0883410340d222482.png
[518f3b3e18a377303d1bcc7f53b1a8a6.png]: /images/20220829/71594827f77a4e589d24d3d69c4293e0.png
[26f757249913389a71686b4b4c9631b8.png]: /images/20220829/5073ab92eb8a4eb9880c0a4c4e6169b1.png