一、组件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的attribute3️⃣ 多个根节点的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 的事件监听），原理 具体如下：组件中使用双向绑定应用：
多个v-model使用
- 作者:😈Zabanya
- 链接:https://blog.zabanya.space/article/e29118f0-b202-4348-94f5-e9b5106961d8
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处