前端学习 vue 从基础到深入笔记（下）

组件 Components

组件组成

组件最大的优势：可复用性
当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的.vue文件中，这叫单文件组件（简称SFC）
组件组成结构：

scoped 是作用域，阻止样式冒泡，当前样式只在当前文件生效，防止影响其他组件。

组件嵌套关系

使用组件的三个步骤：

1. 导入（import）
2. 注册：<script></script>中的components进行注册
3. 引用：<template>进行引用

组件的注册方式

1. 全局注册
2. 局部注册

全局注册在main.js文件中进行操作：

举例如下：
main.js 文件：

App.vue 文件：

注意：局部注册需要使用components选项

组件传递数据 Props

组件与组件不是完全独立的，可以传递数据，传递数据的解决方案就是props。
举例，一对父子级文件Parent.vue与Child.vue，父级传递子级title：
Parent.vue 文件内容为：

Child.vue 文件内容：

也可以传递动态数据（通过属性绑定）：

注意事项：props传递数据，只能从父级传到子级

组件传递多种数据类型

传递数字类型：
Parents.vue

Child.vue

传递对象类型：
Parent.vue

Child.vue

注意事项：props能接收任意数据类型

组件传递 Props 校验

举例：A给B传入数字类型，B对类型进行校验
A.vue

B.vue

也可以多种类型兼容：

设置默认值：

设置必选项：

注意事项：子级不能修改父级传过来的数据，props是只读的

组件事件（子级 -> 父级）

组件事件：在组件的模板表达式中，可以直接使用$emit方法触发自定义事件，触发自定义事件的目的是组件之间的传递数据。
如何实现子级给父级传送数据？使用$emit自定义事件。例子如下：
父级 ComponentEvent.vue

子级 Child.vue

组件事件配合 v-model 使用

v-model：表单输入绑定（详看基础篇）
此处省略（目前没用到）

插槽 Slot

基础使用

我们已经了解到组件能够接收任意类型JavaScript的值作为props，但组件要如何接收模板内容？在某些场景中我们可能想要为子组件传递一些模板片段，让子组件在他们的组件中渲染这些片段。
父子级文件都要使用<template></template>标签对进行包裹。
父级文件：App.vue
子级文件：SlotsBase.vue（<SlotsBase>是当前子级文件名）

渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的，是动态的。
（父级 -> 子级）
<slot></slot>中可设置插槽默认值。
具名插槽：给插槽命名（二级**template #**或**template v-slot:**）

注意最外层的<template></template> 不变

父级：

子级：

v-slot:等于#

插槽内的数据传递（子级 -> 父级）

在某些场景下插槽内容可能想要同时使用父组件域内和子组件域内的数据。我们需要一种方法让子组件在渲染时将一部分数据提供给插槽（子级 -> 父级）。
子级：

父级：

具名插槽如何传递？
子级：

父级：

组件的生命周期

生命周期：从创建到销毁的整个过程。

生命周期函数：

1. 创建期：beforeCreate created
2. 挂载期：beforeMount mounted
3. 更新期：beforeUpdate updated
4. 销设期：beforeUnmount unmounted

测试：

动态组件

有些场景需要进行组件切换，放在<component :is>中：

注意事项：以字符串形式进行赋值

组件保持存活

当使用<component :is=" ">来在多个组件间进行切换时，被切换掉的组件会被卸载。我们可以通过<keep-alive>组件强制被切换掉的组件仍然处于存活状态。
结合上面动态组件的切换组件按钮，当前能被卸载的代码（ComponentsA的代码）：


使用<keep-alive>包裹：

异步组件

用来优化组件的性能。在大型项目中我们可能需要拆分应用为更小的块，仅在需要时才从服务器加载相关的组件。
Vue 提供了defineAsyncComponent方法来实现这个功能。
将之前的ComponentB改为异步加载，需要用到B时才加载：

依赖注入

依赖注入用来解决多级数据传递，我想完成父级 -> 孙级数据传递。
使用provide和inject可以实现：

爷级：

孙级：

注意事项：provide和inject只能由上到下传递，不能反向传递

应用实例