Vue3组件化开发 | 😈Zabanya’s Blog

⬇️ JUMP TO THE END ↙️ 父传子 ↙️ 子传父 ↙️ Slot ↙️ 其他组件 ↙️ DOM操作

一、组件CSS作用域

对于CSS加上 scoped 属性会形成独立作用域

二、父组件传递子组件

父组件有一些数据，需要子组件来进行展示。这个时候我们可以通过props来完成组件之间的通信；props 是在组件上注册一些自定义的attribute(属性)，父组件给这些attribute赋值，子组件通过attribute 的名称获取对应的值。

而且，props 有两种常见的用法：1️⃣ 字符串数组，数组中的字符串就是attribute的名称；2️⃣ 对象类型，对象类型我们可以在指定 attribute 名称的同时，指定它需要传递的类型、是否是必须的、默认值等等

最后，关于命名时：HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符；这意味着当你使用DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的kebab-case (短横线分隔命名) 命名；即 confirmBtn 👉 confirm-btn

父传子——数组写法

小记：父组件绑定 v-bind 绑定，子组件 prop 接收

父传子——对象类型（建议）

其中type可以是以下几种类型：String，Number，Boolean，Array，Object，Date，Function，Symbol。

⭐ 通常在HTML里，大小写不敏感（浏览器会把所有大小写字符解释为小写字符）。但是需要注意的是，prop写法可以用 camelCase (驼峰命名法) 和 kebab-case (短横线分隔命名)，但更推介短横线分隔命名。

非Prop的Attribute

当我们传递给一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为非Prop的Attribute，常见的包括class、style、id属性等

1️⃣ 当组件有单个根节点时，非Prop的Attribute将自动添加到根节点(理解为最外层元素)的Attribute中；【Attribute继承】

2️⃣ 如果我们需要将属性传递给根元素之外的元素，可以禁用根元素继承，禁用根元素继承attribute方法如下，然后通过 $attrs 来访问所有的非props的attribute

3️⃣ 多个根节点的attribute

多个根节点的attribute如果没有显示的绑定，那么会报警告，我们必须手动的指定要绑定到哪一个属性上：

三、子组件传递给父组件

⚠️ 子组件传递给父组件主要有三个步骤：1️⃣ 在子组件 emits 属性中声明要触发的事件；2️⃣ 在子组件触发的函数中加入 this.$emit("声明的事件名")；3️⃣ 父组件中子组件标签中绑定相关事件；

子传父——数组写法

子传父——对象写法

对象写法通常用于参数验证

父子组件案例

四、非父子组件间通信

Provide / Inject（有依赖关系）

对于深度结构的组件通信，子组件想获取父组件的部分内容的时候，Provide 和 Inject 都可以使父组件成为其所有子组件的依赖提供者；父组件有一个 provide 选项来提供数据；子组件有一个 inject 选项来开始使用这些数据。我们可以将依赖注入看作是“long range props”，参考使用场景：主题颜色

基础用法：App -> Home -> HomeContent

补充1️⃣：在provide中使用模块化的数据

补充2️⃣：provide响应式

Mitt全局事件总线(eventBus)

安装mitt库 npm install mitt

封装eventBus.js（通常单独放置在utils文件夹）

About.vue和Home.vue两个组件关系如下:

Mitt的事件取消

六、插槽Slot

插槽基本使用

提高组建的复用性，抽取共性，预留修改空间，在Vue中 <slot> 元素作为承载分发内容的出口，可以看作占位符

基本使用：

具名插槽

小记：需要与template结合使用

⚠️ 备注：不带name的slot默认是default

高级组件 —— 动态插槽名

作用域插槽

渲染作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的（所以父组件无法访问子组件的内容），具体案例如下：

作用域插槽的常见使用

可以理解为子组件父组件相互绑定

七、动态组件<component>

基本使用

动态组件是使用component 组件，通过一个特殊的attribute is 来实现

动态组件实际上可以改用路由实现；

keep-alive

继续保持组件的状态，而不是销毁掉，这个时候我们就可以使用一个内置组件：keep-alive

例如上述的例子中，在某个页面（home / about / category）加入一个点击递增的按钮以及对应的计数器。但是在切换组件的时候组件状态不能得到缓存，所以我们用 <keep-alive> 标签将<component> 标签进行包裹时，可以实现保存组件的状态。此外，该标签还有部分可选属性：include(- string | RegExp | Array。只有名称匹配的组件会被缓存)、exclude、max(number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁)

八、异步组件

前言 · Webpack分包方式

主要是为了提高渲染速度，提高用户体验。实现主要是将不同代码进行分包，不一次性下载全部源码。具体实现如下：

异步组件

对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），Vue中给我们提供了一个函数：defineAsyncComponent

defineAsyncComponent 接受两种类型的参数：

1️⃣ 工厂函数，该工厂函数需要返回一个Promise对象；

2️⃣ 接受一个对象类型，对异步函数进行配置；

Suspend

⭐Suspense显示的是一个实验性的特性，API随时可能会修改

Suspense是一个内置的全局组件，该组件有两个插槽：

default：如果default可以显示，那么显示default的内容；

fallback：如果default无法显示，那么会显示fallback插槽的内容；

九、引用元素和组件

$refs

某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：

在Vue开发中不推荐进行DOM操作的；

这个时候，我们可以给元素或者组件绑定一个ref的attribute属性；

$parent & $root & $el

我们可以通过$parent来访问父元素，也可以通过$root来实现访问根组件App。注意：在Vue3中已经移除了$children的属性

十、生命周期

备注：create 和 mount 两个周期通常只会有一次

十一、缓存组件的生命周期

activated 和 deactivated 通常用作保存组件状态（缓存作用）

组件之V-model

在元素中使用 v-model 相当于做了双向绑定（ v-bind:value 的数据绑定和 @input 的事件监听），原理具体如下：