1.组件的拆分和嵌套

认识组件的嵌套

前面我们是将所有的逻辑放到一个App.vue中：
在之前的案例中，我们只是创建了一个组件App；
如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；
所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；
再将这些组件组合嵌套在一起，最终形成我们的应用程序；

我们来分析一下下面代码的嵌套逻辑，假如我们将所有的代码逻辑都放到一个App.vue组件中：
我们会发现，将所有的代码逻辑全部放到一个组件中，代码是非常的臃肿和难以维护的。
并且在真实开发中，我们会有更多的内容和代码逻辑，对于扩展性和可维护性来说都是非常差的。
所以，在真实的开发中，我们会对组件进行拆分，拆分成一个个功能的小组件。

组件的拆分

我们可以按照如下的方式进行拆分：

按照如上的拆分方式后，我们开发对应的逻辑只需要去对应的组件编写就可。

2.组件的css作用域

1.建立如图文件

2.组件样式被污染

3.父级渲染到子级

4.通过给组件添加div标签解决

3.父组件传递子组件

组件的通信

上面的嵌套逻辑如下，它们存在如下关系：
App组件是Header、Main、Footer组件的父组件；
Main组件是Banner、ProductList组件的父组件；

在开发过程中，我们会经常遇到需要组件之间相互进行通信：
比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示；
又比如我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给它们来进行展示；
也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件；

总之，在一个Vue项目中，组件之间的通信是非常重要的环节，所以接下来我们就具体学习一下组件之间是如何相 互之间传递数据的；

父子组件之间通信的方式

父子组件之间如何进行通信呢？
父组件传递给子组件：通过props属性；
子组件传递给父组件：通过$emit触发事件；

父组件传递给子组件

在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：
这个时候我们可以通过props来完成组件之间的通信；

什么是Props呢？
Props是你可以在组件上注册一些自定义的attribute；
父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值；

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

• Props的数组用法

• Props的对象用法 数组用法中我们只能说明传入的attribute的名称，并不能对其进行任何形式的限制，接下来我们来看一下对象的写法是如何让我们的props变得更加完善的。

当使用对象语法的时候，我们可以对传入的内容限制更多：
比如指定传入的attribute的类型；
比如指定传入的attribute是否是必传的；
比如指定没有传入时，attribute的默认值；

细节一：那么type的类型都可以是哪些呢？
String
Number
Boolean
Array
Object
Date
Function
Symbol

细节二：对象类型的其他写法

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

非Prop的Attribute

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

Attribute继承
当组件有单个根节点时，非Prop的Attribute将自动添加到根节点的Attribute中：

• 禁用Attribute继承和多根节点 如果我们不希望组件的根元素继承attribute，可以在组件中设置inheritAttrs: false：
  禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素；
  我们可以通过$attrs来访问所有的非props的attribute；

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

4.子组件传递父组件

什么情况下子组件需要传递内容到父组件呢？
当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容；
子组件有一些内容想要传递给父组件的时候；

我们如何完成上面的操作呢？
首先，我们需要在子组件中定义好在某些情况下触发的事件名称；
其次，在父组件中以v-on的方式传入要监听的事件名称，并且绑定到对应的方法中；
最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件；

自定义事件的流程

我们封装一个CounterOperation.vue的组件：
内部其实是监听两个按钮的点击，点击之后通过this.$emit的方式发出去事件；

自定义事件的参数和验证

自定义事件的时候，我们也可以传递一些参数给父组件：

在vue3当中，我们可以对传递的参数进行验证：

5.组件间通信案例练习

我们来做一个相对综合的练习：

• main.js

import { createApp } from 'vue'
import App from './05_商品页面的切换/App.vue'

createApp(App).mount('#app')

• App.vue

<template>
  <div>
    <tab-control :titles="titles" @titleClick="titleClick"></tab-control>
    <h2>{{ contents[currentIndex] }}</h2>
  </div>
</template>

<script>
import TabControl from "./TabControl.vue";

export default {
  components: {
    TabControl,
  },
  data() {
    return {
      titles: ["衣服", "鞋子", "裤子"],
      contents: ["衣服页面", "鞋子页面", "裤子页面"],
      currentIndex: 0,
    };
  },
  methods: {
    titleClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
</style>

• TabControl.vue

<template>
  <div class="tab-control">
    <div class="tab-control-item" 
         :class="{active: currentIndex === index}"
         v-for="(title, index) in titles" 
         :key="title"
         @click="itemClick(index)">
      <span>{{title}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    emits: ["titleClick"],
    props: {
      titles: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        currentIndex: 0
      }
    },
    methods: {
      itemClick(index) {
        this.currentIndex = index;
        this.$emit("titleClick", index);
      }
    }
  }
</script>

<style scoped>
  .tab-control {
    display: flex;
  }

  .tab-control-item {
    flex: 1;
    text-align: center;
  }

  .tab-control-item.active {
    color: red;
  }

  .tab-control-item.active span {
    border-bottom: 3px solid red;
    padding: 5px 10px;
  }
</style>

6.Provide和Inject使用

非父子组件的通信

在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。

这里我们主要讲两种方式：
Provide/Inject；
Mitt全局事件总线；

Provide和Inject

Provide/Inject用于非父子组件之间共享数据：
比如有一些深度嵌套的组件，子组件想要获取父组件的部分内 容；
在这种情况下，如果我们仍然将props沿着组件链逐级传递下 去，就会非常的麻烦；

对于这种情况下，我们可以使用Provide 和Inject：
无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者；
父组件有一个provide 选项来提供数据；
子组件有一个inject 选项来开始使用这些数据；

实际上，你可以将依赖注入看作是 “long range props” ，除了：
父组件不需要知道哪些子组件使用它provide 的property
子组件不需要知道inject 的property 来自哪里

Provide和Inject基本使用

我们开发一个这样的结构：

Provide和Inject函数的写法

如果Provide中提供的一些数据是来自data，那么我们可能会想要通过this来获取：

这个时候会报错：
这里给大家留一个思考题，我们的this使用的是哪里的this？

处理响应式数据

我们先来验证一个结果：如果我们修改了this.names的内容，那么使用length的子组件会不会是响应式的？

我们会发现对应的子组件中是没有反应的：
这是因为当我们修改了names之后，之前在provide中引入的this.names.length 本身并不是响应式的；

那么怎么样可以让我们的数据变成响应式的呢？
非常的简单，我们可以使用响应式的一些API来完成这些功能，比如说computed函数；
当然，这个computed是vue3的新特性，在后面我会专门讲解，这里大家可以先直接使用一下；

注意：我们在使用length的时候需要获取其中的value
这是因为computed返回的是一个ref对象，需要取出其中的value来使用；

7.事件总线的使用

全局事件总线mitt库

Vue3从实例中移除了$on、$off 和$once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库：
Vue3官方有推荐一些库，例如mitt 或tiny-emitter；
这里我们主要讲解一下mitt库的使用；

首先，我们需要先安装这个库： npm install mitt

其次，我们可以封装一个工具eventbus.js：

• 使用事件总线工具 在项目中可以使用它们：
  我们在Home.vue中监听事件；
  我们在App.vue中触发事件；

• Mitt的事件取消 在某些情况下我们可能希望取消掉之前注册的函数监听：

8.插槽的基本使用

认识插槽Slot

在开发中，我们会经常封装一个个可复用的组件：
前面我们会通过props传递给组件一些数据，让组件来进行展示；
但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；
比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；
我们应该让使用者可以决定某一块区域到底存放什么内容和元素；

举个栗子：假如我们定制一个通用的导航组件- NavBar
这个组件分成三块区域：左边-中间-右边，每块区域的内容是不固定；
左边区域可能显示一个菜单图标，也可能显示一个返回按钮，可能什么都不显示；
中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等；
右边可能是一个文字，也可能是一个图标，也可能什么都不显示；

如何使用插槽slot？

这个时候我们就可以来定义插槽slot：
插槽的使用过程其实是抽取共性、预留不同；
我们会将共同的元素、内容依然在组件内进行封装；
同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素；

如何使用slot呢？
Vue中将 <slot> 元素作为承载分发内容的出口；
在封装组件中，使用特殊的元素<slot> 就可以为封装组件开启一个插槽；
该插槽插入什么内容取决于父组件如何使用；

插槽的基本使用

我们一个组件MySlotCpn.vue：该组件中有一个插槽，我们可以在插槽中放入需要显示的内容；

我们在App.vue中使用它们：我们可以插入普通的内容、html元素、组件元素，都可以是可以的；

插槽的默认内容

有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容：
当然这个默认的内容只会在没有提供插入的内容时，才会显示；

多个插槽的效果

我们先测试一个知识点：如果一个组件中含有多个插槽，我们插入多个内容时是什么效果？
我们会发现默认情况下每个插槽都会获取到我们插入的内容来显示；

9.具名插槽的使用

事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用具名插槽：
具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的attribute：name；
一个不带name 的slot，会带有隐含的名字default；

动态插槽名

什么是动态插槽名呢？
目前我们使用的插槽名称都是固定的；
比如v-slot:left、v-slot:center等等；
我们可以通过 v-slot:[dynamicSlotName] 方式动态绑定一个名称；

具名插槽使用的时候缩写

具名插槽使用的时候缩写：
跟v-on 和v-bind 一样，v-slot 也有缩写；
即把参数之前的所有内容(v-slot:) 替换为字符#；

10.作用域插槽使用

渲染作用域

在Vue中有渲染作用域的概念：
父级模板里的所有内容都是在父级作用域中编译的；
子模板里的所有内容都是在子作用域中编译的；

如何理解这句话呢？我们来看一个案例：
在我们的案例中ChildCpn自然是可以让问自己作用域中的title内容的；
但是在App中，是访问不了ChildCpn中的内容的，因为它们是跨作用域的访问；

认识作用域插槽

但是有时候我们希望插槽可以访问到子组件中的内容是非常重要的：
当一个组件被用来渲染一个数组元素时，我们使用插槽，并且希望插槽中没有显示每项的内容；
这个Vue给我们提供了作用域插槽；

我们来看下面的一个案例：
1.在App.vue中定义好数据
2.传递给ShowNames组件中
3.ShowNames组件中遍历names数据
4.定义插槽的prop
5.通过v-slot:default的方式获取到slot的props
6.使用slotProps中的item和index

独占默认插槽的缩写

如果我们的插槽是默认插槽default，那么在使用的时候v-slot:default="slotProps"可以简写为vslot="slotProps"：

并且如果我们的插槽只有默认插槽时，组件的标签可以被当做插槽的模板来使用，这样，我们就可以将v-slot 直接用在组件上：

默认插槽和具名插槽混合

但是，如果我们有默认插槽和具名插槽，那么按照完整的template来编写。

只要出现多个插槽，请始终为所有的插槽使用完整的基于<template> 的语法：

11.动态组件的使用

切换组件案例

比如我们现在想要实现了一个功能：
点击一个tab-bar，切换不同的组件显示；

这个案例我们可以通过两种不同的实现思路来实现：
方式一： 通过v-if来判断，显示不同的组件；
方式二： 动态组件的方式；

v-if显示不同的组件

我们可以先通过v-if来判断显示不同的组件，这个可以使用我们之前讲过的知识来实现：

动态组件的实现

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

这个currentTab的值需要是什么内容呢？
可以是通过component函数注册的组件；
在一个组件对象的components对象中注册的组件；

动态组件的传值

如果是动态组件我们可以给它们传值和监听事件吗？
也是一样的；
只是我们需要将属性和监听事件放到component上来使用；

认识keep-alive

我们先对之前的案例中About组件进行改造：
在其中增加了一个按钮，点击可以递增的功能；

比如我们将counter点到10，那么在切换到home再切换回来about时，状态是否可以保持呢？
答案是否定的；
这是因为默认情况下，我们在切换组件后，about组件会被销毁掉，再次回来时会重新创建组件；

但是，在开发中某些情况我们希望继续保持组件的状态，而不是销毁掉，这个时候我们就可以使用一个内置组件：keep-alive。

• keep-alive属性 keep-alive有一些属性：
  include - string | RegExp | Array。只有名称匹配的组件会被缓存；
  exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；
  max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；

include 和exclude prop 允许组件有条件地缓存：
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；
匹配首先检查组件自身的name 选项；

缓存组件的生命周期

对于缓存的组件来说，再次进入时，我们是不会执行created或者mounted等生命周期函数的：
但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；
这个时候我们可以使用activated 和deactivated 这两个生命周期钩子函数来监听；

12.异步组件的使用

Webpack的代码分包

默认的打包过程：
默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起（比如一个app.js文件中）；
这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢；

打包时，代码的分包：
所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js；
这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容；

那么webpack中如何可以对代码进行分包呢？

Vue中实现异步组件

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

defineAsyncComponent接受两种类型的参数：
类型一： 工厂函数，该工厂函数需要返回一个Promise对象；
类型二： 接受一个对象类型，对异步函数进行配置；

工厂函数类型一的写法：

• 异步组件的写法二

异步组件和Suspense

注意：目前（2021-12-07）Suspense显示的是一个实验性的特性，API随时可能会修改。

Suspense是一个内置的全局组件，该组件有两个插槽：
default： 如果default可以显示，那么显示default的内容；
fallback： 如果default无法显示，那么会显示fallback插槽的内容；

13.引用元素和组件

$refs的使用

某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：
在Vue开发中我们是不推荐进行DOM操作的；
这个时候，我们可以给元素或者组件绑定一个ref的attribute属性；

组件实例有一个$refs属性：
它一个对象Object，持有注册过ref attribute 的所有DOM 元素和组件实例。

$parent和$root

我们可以通过$parent来访问父元素。

HelloWorld.vue的实现：
这里我们也可以通过 $root 来实现，因为App是我们的根组件；

注意：在Vue3中已经移除了$children的属性，所以不可以使用了。

14.组件的生命周期

认识生命周期

什么是生命周期呢？
每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程；
在这个过程中的某一个阶段，用于可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）；
但是我们如何可以知道目前组件正在哪一个过程呢？Vue给我们提供了组件的生命周期函数；

生命周期函数：
生命周期函数是一些钩子函数，在某个时间会被Vue源码内部进行回调；
通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段；
那么我们就可以在该生命周期中编写属于自己的逻辑代码了；

• 生命周期的流程

15.组件的v-model

前面我们在input中可以使用v-model来完成双向绑定：
这个时候往往会非常方便，因为v-model默认帮助我们完成了两件事；
v-bind:value的数据绑定和 @input的事件监听；

如果我们现在封装了一个组件，其他地方在使用这个组件时，是否也可以使用v-model来同时完成这两个功能呢？
也是可以的，vue也支持在组件上使用v-model；

当我们在组件上使用的时候，等价于如下的操作：
我们会发现和input元素不同的只是属性的名称和事件触发的名称而已；

组件v-model的实现

那么，为了我们的MyInput组件可以正常的工作，这个组件内的<input> 必须：
将其value attribute 绑定到一个名叫 modelValue的prop 上；
在其input 事件被触发时，将新的值通过 自定义的update:modelValue事件抛出；

MyInput.vue的组件代码如下：

computed实现

我们依然希望在组件内部按照双向绑定的做法去完成，应该如何操作呢？我们可以使用计算属性的setter和getter来完成。

绑定多个属性

我们现在通过v-model是直接绑定了一个属性，如果我们希望绑定多个属性呢？
也就是我们希望在一个组件上使用多个v-model是否可以实现呢？
我们知道，默认情况下的v-model其实是绑定了modelValue 属性和 @update:modelValue的事件；
如果我们希望绑定更多，可以给v-model传入一个参数，那么这个参数的名称就是我们绑定属性的名称；

注意：这里我是绑定了两个属性的

v-model:title相当于做了两件事：
绑定了title属性；
监听了@update:title的事件；

认识Mixin

目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。

在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：
Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
一个Mixin对象可以包含任何组件选项；
当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选项中；

Mixin的基本使用

Mixin的合并规则

如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？
这里分成不同的情况来进行处理；

情况一：如果是data函数的返回值对象
返回值对象默认情况下会进行合并；
如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；

情况二：如何生命周期钩子函数
生命周期的钩子函数会被合并到数组中，都会被调用；

情况三：值为对象的选项，例如methods、components 和directives，将被合并为同一个对象。
比如都有methods选项，并且都定义了方法，那么它们都会生效；
但是如果对象的key相同，那么会取组件对象的键值对；

全局混入Mixin

如果组件中的某些选项，是所有的组件都需要拥有的，那么这个时候我们可以使用全局的mixin：
全局的Mixin可以使用应用app的方法mixin 来完成注册；
一旦注册，那么全局混入的选项将会影响每一个组件；