1、组件注册
1.1 全局注册
Vue.createApp({...}).component('my-component-name', {
// ... 选项 ...
})或者像下面这样写
const app = Vue.createApp({})
app.component('component-a', {
/* ... */
})
app.component('component-b', {
/* ... */
})1.2 局部注册
通过一个普通的 JavaScript 对象来定义组件
const ComponentA = {
/* ... */
}
const ComponentB = {
/* ... */
}然后在 components?选项中定义你想要使用的组件：
const app = Vue.createApp({
components: {
'component-a': ComponentA, // component-a 为对应的组件名
'component-b': ComponentB
}
})局部注册的组件在其子组件中不可用
例如，上面的组件 ComponentA 和 ComponentB 都是在 app 中局部注册的
但在 ComponentB 中是无法使用 ComponentA?的
除非你这样写：
const ComponentA = {
/* ... */
}
const ComponentB = {
components: {
'component-a': ComponentA
}
// ...
}在 ComponentB 中注册?ComponentA 之后，才能使用?ComponentA
2、父子组件通信
父子组件通过两种不同的方式来相互通信
- 父传子：props
- 子传父：$emit
先来讲一下父传子，也就是 props
2.1 Props
Prop 是你可以在组件上注册的一些自定义 attribute
Props 有两种常见的用法：
- 数组
- 对象
直接用代码来解释用法
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})在上述代码中，我们局部注册了一个组件 blog-post
并且在 props 中自定义了一个 attribute，并且在 template 中使用了 title
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>在父组件中使用?blog-post 组件，并且给 title 赋值
这样就实现了父组件给子组件传值
页面效果如下：
2.1.1 Props 的数组用法?
// 简单语法
app.component('props-demo-simple', {
props: ['size', 'myMessage']
})2.1.2 Props 的对象用法
type 的类型可以是下面这些：
补充：对象类型的其它写法
app.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default() {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
default() {
return 'Default function'
}
}
}
})注意：使用 DOM 中的模板时，驼峰命名的 prop 名需要使用其等价的短横线分隔符命名来替换
2.2?非 Prop 的 Attribute
一个非 prop 的 attribute 是指传向一个组件
但是该组件并没有相应 props 或 emits 定义的 attribute
2.2.1 Attribute 继承
2.2.2 禁用 Attribute 继承
如果我们不希望根元素继承 attribute
可以在组件的选项中设置
inheritAttrs: false
如下所示：
2.2.3 多个根节点上的 Attribute 继承
2.3?监听子组件事件
首先，我们需要?在子组件中定义好某些情况下触发的事件名称
其次，在父组件中以 v-on 的方式传入要监听的事件名称，并绑定对应的方法
最后，在子组件中发生某个事件的时候，根据事件名触发对应的事件
先看一个计数器的例子，如下图所示：
大致过程就是：
2.3.1 验证抛出的事件
const app = createApp({})
// 数组语法
app.component('todo-item', {
emits: ['check'],
created() {
this.$emit('check')
}
})
// 对象语法
app.component('reply-form', {
emits: {
// 没有验证函数
click: null,
// 带有验证函数
submit: payload => {
if (payload.email && payload.password) {
return true
} else {
console.warn(`Invalid submit event payload!`)
return false
}
}
}
})3、非父子组件通信
使用 provide 和 inject
无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者
这个特性有两个部分：
- 父组件有一个 provide 选项来提供数据
- 子组件有一个 inject 选项来开始使用这些数据
还是继续用前面那个例子进行讲解
provide 组件实例的 property
但如果 todos 中的内容发生了变化，也就是 todos.length 改变时，不会反映在 inject 中
3.1 处理响应性
全局事件总库 mitt 库 ？
4、插槽
4.1 基本使用
4.2 默认内容
使用插槽时，如果没有提供内容，则会显示插槽默认的内容
如果我们提供内容，则这个提供的内容将会被渲染从而取代默认内容
4.3 具名插槽
4.3.1 具名插槽的缩写
v-slot: 可以写成 #
因此上面的代码可以这样写：
<base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<template #default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>4.4 动态插槽名
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>4.5?渲染作用域
规则只有一条：
父级模板里的所有内容都是在父级作用域中编译的
子模板里的所有内容都是在子作用域中编译的?
4.6 作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的
下面我们来看一个例子，组件 todo-list 中包含一个 items
我们将其动态的绑定到了 slot 上面
app.component('todo-list', {
data() {
return {
items: ['Feed a cat', 'Buy milk']
}
},
template: `
<ul>
<li v-for="( item, index ) in items">
<slot :item="item"></slot>
</li>
</ul>
`
})我们在父组件中使用了 todo-list 组件，要想在父组件中使用 slot 中绑定的 attribute
我们需要先包裹一层 template，然后把之前绑定的 attribute 传过来
也就是给 v-slot 赋一个 slotProps?（绑定在 slot 元素上的 attribute 被称为 插槽 prop）
最后通过 slotProps 获取传过来的值
<todo-list>
<template v-slot:default="slotProps">
<span>{{ slotProps.item }}</span>
</template>
</todo-list>4.6.1 独占默认插槽的缩写语法
?在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用
<todo-list v-slot:default="slotProps">
<span>{{ slotProps.item }}</span>
</todo-list>这种写法还可以更简单
当我们的插槽是默认插槽时，也就是说它没有名字，那就可以像这样写：
<todo-list v-slot="slotProps">
<span>{{ slotProps.item }}</span>
</todo-list>默认插槽的缩写语法不能和具名插槽混用
只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：
<todo-list>
<template v-slot:default="slotProps">
<span>{{ slotProps.item }}</span>
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</todo-list>5、动态组件
上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is Attribute 来实现：
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component :is="currentTabComponent"></component>注：也可以对动态组件传值和监听事件
5.1 keep-live
当在组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复渲染导致的性能问题
用法如下：
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>keep-live 的属性：
- include? 只有名称匹配的组件会被缓存
- exclude? 任何名称匹配的组件都不会被缓存
- max??最多可以缓存多少组件实例
注：对于已经被缓存的组件来说，再次切换回该组件时
? ? ? ?我们是不会执行 created 或者 mounted 等生命周期函数
? ? ? ?但是可以使用 activated 和 deactivated 这两个生命周期钩子函数来监听?？
5.2 Webpack 的代码分包
默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的
那么 webpack 在打包时就会将组件模块打包到一起（比如全部打包到 app.js 文件中）
随着项目的不断庞大，app.js 文件的内容过大，会造成 首屏的渲染速度变慢
所以，对于一些不需要立即使用的组件，我们可以对其进行拆分，单独打包
拆分成一个个 chunk.js
这些 chunk.js 会在需要的时候，从服务器上加载下来，并运行对应的代码
Vue 中也有类似的方法
6、异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块
并且只在需要的时候才从服务器加载一个模块
Vue 中有一个 defineAsyncComponent 方法可以实现上述需求
用法如下：
import { defineAsyncComponent } from 'vue' // 导入
const AsyncComp = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
) // 实现异步加载在局部注册组件时，也可以使用?defineAsyncComponent
import { createApp, defineAsyncComponent } from 'vue'
createApp({
// ...
components: {
AsyncComponent: defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
}
})对于高阶用法，defineAsyncComponent 可以接受一个对象
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent({
// 工厂函数
loader: () => import('./Foo.vue')
// 加载异步组件时要使用的组件
loadingComponent: LoadingComponent,
// 加载失败时要使用的组件
errorComponent: ErrorComponent,
// 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
delay: 200,
// 如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件
// 默认值：Infinity（即永不超时，单位 ms）
timeout: 3000,
// 定义组件是否可挂起 | 默认值：true
suspensible: false,
/**
*
* @param {*} error 错误信息对象
* @param {*} retry 一个函数，用于指示当 promise 加载器 reject 时，加载器是否应该重试
* @param {*} fail 一个函数，指示加载程序结束退出
* @param {*} attempts 允许的最大重试次数
*/
onError(error, retry, fail, attempts) {
if (error.message.match(/fetch/) && attempts <= 3) {
// 请求发生错误时重试，最多可尝试 3 次
retry()
} else {
// 注意，retry/fail 就像 promise 的 resolve/reject 一样：
// 必须调用其中一个才能继续错误处理。
fail()
}
}
})6.1 Suspense
是一个实验性的新特性
提供两个插槽，fallback 为备用的
7、模板引用
尽管存在 prop 和事件，但有时我们可能仍然需要直接访问 JavaScript 中的子组件
这个时候，我们可以使用 $refs
同样，作为子组件，我们可以通过 $parent 和 $root 访问父组件中的元素
8、生命周期
所有的生命周期钩子自动绑定 this 上下文到实例中
这也意味着我们 不能使用箭头函数来定义一个生命周期方法
下面来介绍一下什么是生命周期
每个组件都可能会经历从?创建、挂载、更新以及卸载?等一系列的过程? ? ??
在这个过程中的?某一个阶段，我们可能会想要?添加一些属于自己的代码逻辑
但是我们如果想要知道目前组件正处于哪一个阶段的话
需要借助 Vue 给我们提供的关于组件的?生命周期函数
生命周期函数：
生命周期函数是一些钩子，在某个时间会被 Vue 源码内部进行回调
通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段
那么我们就可以在该生命周期中编写属于自己的代码
生命周期图示：
9、组件的 v-model
默认情况下，组件上的 v-model 使用 modelValue 作为 prop
update：modelValue 作为事件
不太懂？