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

曾经终败给现在 2022-09-09 04:40 195阅读 0赞

# 大厂技术 高级前端 Node进阶    #

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

![27ac85d64333b95b49d33d1463eb0ff9.png][]

# 前言 #

最近重新夯实`Vue3`

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

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

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

# 脑图 #

## 注册组件 ##

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

![46c1aa1ef6c456cbccc10091bac385ca.png][] 1 注册组件.png

## 组件Props ##

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

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

## 非属性特性 ##

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

![ce7d76a5a3b4dbe1d0efe525cfd9b587.png][] 3非属性特性.png

## 自定义事件 ##

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

![10bbecb113711d0c7f99bf62cb4bdc76.png][] 4自定义事件.png

## 插槽slot ##

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

![71254a35d3593a479fb87db9944b034c.png][] 5插槽slot.png

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

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

![488852a11f184fccd0b3f7709f1004f4.png][] 6依赖注入：Provide和Inject.png

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

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

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

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

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

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

# 附件 #

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

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

# END #

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

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

关于本文

# 来源：LBJ #

https://juejin.cn/post/6991289524915535908

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

![3889ebf433dab23dacc1ff5c312ceadf.png][]

**“分享、点赞、在看” 支持一波** ![8c9c48df7a02286863aa91a37f9c0c33.png][]

[27ac85d64333b95b49d33d1463eb0ff9.png]: /images/20220829/2eb02774ad79451fb552e840dcb4715c.png
[46c1aa1ef6c456cbccc10091bac385ca.png]: /images/20220829/48bc137ecf944d009dd01f0454043e9d.png
[e04ab9dad3f26f55518ed280cfee7e1d.png]: /images/20220829/161d29c4c9894550a9d2c2755cd1256e.png
[ce7d76a5a3b4dbe1d0efe525cfd9b587.png]: /images/20220829/c3ce4ed7082d47559b8c6dcdc768ba7c.png
[10bbecb113711d0c7f99bf62cb4bdc76.png]: /images/20220829/386c7a6e02f24443868bddbb1bc8536f.png
[71254a35d3593a479fb87db9944b034c.png]: /images/20220829/b5e897c72a8b4b30be056724bcc397ef.png
[488852a11f184fccd0b3f7709f1004f4.png]: /images/20220829/d10746ccfd0c4fe6bcacaf59664c2906.png
[7ae2e948ec64f28ed30ddf8ec52005bd.png]: /images/20220829/eda9219d247544e28bb58772d497a390.png
[d2e90e46f3c9ffbab69e9437fd7b6a24.png]: /images/20220829/739fcb3ac4354c35b86f217012f83515.png
[3889ebf433dab23dacc1ff5c312ceadf.png]: /images/20220829/7c44eea14a134aa895fe7b42b6b2b18c.png
[8c9c48df7a02286863aa91a37f9c0c33.png]: /images/20220829/89e5f2e71c0a48bfa3a63ef74fea84b7.png