这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

这是关于组件。看文本篇，你将对组件有个清晰的认识

本文目录结构如下：

image.png

组件基础

1. 可以使用Vue应用实例身上的component()来注册一个组件

2. component接受的配置选项与Vue.createApp()中的配置选项基本一致，如data、computed、watch、methods 以及生命周期钩子等

3. 注册成功后，可将这个组件作为自定义元素来使用

组件的复用

1. 一个组件可以复用任意次数

2. 每个组件都是独立的

组件的组织

一个应用会以一棵嵌套组件树的形式来组织

父子组件通信

1. 父组件向子组件传递数据可通过 Prop 实现

2. Prop是指组件上注册的一些自定义属性

3. 当一个值传递给一个 prop 时，这个值就会变成该组件实例的一个属性

4. 一个组件默认可以拥有任意数量的 prop

5. 任何值都可以传递给任何 prop

6. 一个prop被注册之后，可以将数据作为之定义属性的值传入

7. 可以使用v-bind来动态传递prop

子父通信

1. 通过事件的方式实现子父通信

2. 本质是子组件绑定事件，父级组件监听子组件事件，当子组件触发事件时，父级组件进行相关操作

3. 子组件通过$emit()来触发事件，父组件通过v-on监听事件

4. $emit()第一个参数表示监听的事件名，第二个参数可作为要传递的数据

5. 当父级组件监听这个事件时，表达式中可通过$event访问传递的东西，如果是个处理方法，数据将会作为第一个参数传入该方法

6. 通过这种事件的方式可以实现v-model

<input v-model="searchText" />

等价于

<input :value="searchText" @input="searchText = $event.target.value" />

7. 在自定义组件上使用v-model

需要满足一下要求

• 组件内的<input>必须将value绑定到一个名叫 modelValue 的属性上
• 监听input事件，当input事件触发时，触发update:modelValue事件，并将新的数据$event.target.value传递出去

另一种方式是使用computed 的定义 getter和 setter来实现v-model

• get 方法应返回 modelValue，或用于绑定的任何属性
• set方法应为该 property 触发相应的 $emit

通过插槽分发内容

1. 本质上，插槽是Vue的自定义元素

2. 插槽可用于向组件分发内容

动态组件

1. 通过 Vue 的<component> 元素加一个特殊的 is属性来实现
2. is的值可以是已注册组件的名字，或是一个组件的选项对象

解析 DOM 模板时的注意事项

1. 有些 HTML 元素，诸如 <ul>、<ol>、<table>和 <select>，对于哪些元素可以出现在其内部是有严格限制的

2. 而有些元素，诸如<li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部

3. 使用这些有约束条件的元素时可能遇到一些问题

比如：自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错

可使用v-is解决

注意：v-is值应为 JavaScript 字符串文本，比如<tr v-is="'blog-post-row'"></tr>

如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串模板 (例如：template: '...')

• 单文件组件

• <script type="text/x-template">

以上就是组件的基本使用的所有内容

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

END~

为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map