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 ```javascript import { createApp } from ‘vue’ import App from ‘./05_商品页面的切换/App.vue’

createApp(App).mount(‘#app’)

- **App.vue**
```javascript
<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 ```javascript

```

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

插槽的基本使用

我们一个组件MySlotCpn.vue：该组件中有一个插槽，我们可以在插槽中放入需要显示的内容；
我们在App.vue中使用它们：我们可以插入普通的内容、html元素、组件元素，都可以是可以的；

插槽的默认内容

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

多个插槽的效果

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

9.具名插槽的使用

事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用具名插槽：
具名插槽顾名思义就是给插槽起一个名字， 元素有一个特殊的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来编写。

只要出现多个插槽，请始终为所有的插槽使用完整的基于