Vue中组件的基本使用

1,636 阅读4分钟

前言

这是我在掘金坚持日更的第 41

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

这是本系列第12篇,关于组件。看文本篇,你将对组件有个清晰的认识

本系列相关文章如下:

基础类

  1. 理解应用实例和组件实例 | 重学Vue3
  2. 理解模板语法 | 重学Vue3
  3. 深入理解配置选项之data和methods| 重学Vue3
  4. 理解计算属性和监听器 | 重学Vue3
  5. 绑定class和内联样式style | 重学Vue3
  6. 理解条件渲染 | 重学Vue3
  7. 理解列表渲染 | 重学vue3
  8. 理解事件处理及相关修饰符 | 重学Vue3
  9. 理解v-model及其修饰符 | 重学Vue3

手写实现类

  1. 模拟实现Vue3初始化流程
  2. 模拟实现所有Vue3响应式API(上)

本文目录结构如下:

image.png

组件基础

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

  2. component接受的配置选项与Vue.createApp()中的配置选项基本一致,如datacomputedwatchmethods 以及生命周期钩子等

  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" />
  1. 在自定义组件上使用 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">

总结

组件的本质其实就可复用的组件实例,通过应用实例身上component方法来注册一个组件,当然以后可能用的最多的是单文件组件,这个以后会讲到

为了方便以后查看,我将上述所有内容总结为一图

10组件的基本使用.png

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

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

END~