【无标题】

学习指南

在上一章节中学习了 Vue.is 中的内置指令，本章学习 Vue.is 中的组件。组件(Component)是 Vue.is 最核心的功能，也是整个框架设计最精彩的地方，当然相对来说也最难掌握。本章主要介绍组件的相关内容，并通过几个实例熟练使用 Vue.is 的组件。

本章的学习重点

• 组件的创建和使用

• 组件通信

• 使用 slot 分发内容

• 组件案例开发

组件的简介

组件

概述：组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。

组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

为什么使用组件

1、方便重复使用

2、减少代码重复冗余

3、便于多人协同开发

4、有助于提高开发效率

5、提升整个项目的可维护性

Tip:通常，代码中一些没有见过的自定义标签，如<my-component>等，就是组件。每一个标签代表一个组件，组件一旦注册成功，就可以复用，可以在很多需要的地方直接使用即可。

举例，比如 element和Vant 就是两个典型的提供了很多内置组件的UI框架。

组件的使用

组件的使用步骤

1、在components 文件夹新建组件页面

2、在需要此组件的页面调用组件

组件之间的通信

组件是是Vue.js中最强大的功能之一。组件实例的作用域是相互独立的，这就意味着不同组件之间的数据是无法共享的。一般组件之间的关系如图所示。

A和B，B和C、B和D都是父子关系，C和D是兄弟关系，A和C、A和D是隔代关系（可能隔多代）。

组件通信时，根据组件之间的关系的不同，有着不同的通信方式。一般通信分为3种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。针对不同的场景，需要使用不同的通信方式。

1、父组件向子组件传递数据，需要props属性来实现。

2、子组件向父组件传值，需要用到自定义事件，整个通信的过程为：

        2.1、子组件使用this.$emit('事件名','需要传输的数据')来触发事件，父组件使用$on()来监听子组件的事件。

父组件向子组件通信

通常，父组件的模板中包含子组件，父组件要向子组件传递数据或者参数，子组件在接收到父组件的数据或参数后，会根据数据或参数的不同进行对应的渲染。而这个过程是通过props来实现的。

步骤：

1、调用子组件时，传递数据到子组件当中。

2、子组件接收父组件传进来的值

效果如下：

组件实战案例

通过实现组件的注册和调用实现以下页面效果。

1、定义一个头部组件，名为 navBar，分别在page1、page2、page3、进行调用。

2、定义一个底部组件，名为 tabBar，分别在page1、page2、page3、进行调用。

3、定义一个宫格组件，名为grid，分别在page1、page2、page3、进行调用。

提供的原始页面和素材：

内容分发slot（插槽）

插槽（Slot）是Vue提出来的一个概念，正如名字一样，当组件的内容由父组件决定时，就会用到slot。内容分发非常适用于“固定部分”+“动态部分”的组件场景。固定部分可以是结构固定，也可以是逻辑固定，从而使编写的组件更加灵活，实现组件的高度复用。

1、单个插槽

在子组件中使用特殊的<slot>元素就可以为这个组件开启一个slot。在父组件模板中，插入在子组件标签内的所有内容将替代子组件的slot标签和内容。

2、具名插槽

在前面的案例中不难看出，在组件中使用了slot之后，组件的部分内容变成了动态的。如果一个组件中有多部分的内容都是动态的，则需要为slot元素指定一个name属性，具有name属性的插槽称之为具名插槽。具名插槽可以分发多个内容，也可以与单个插槽共存。

1、定义一个商品卡片组件（card）

2、在page1和page2里面分别调用此卡片组件。

3、通过插槽实现自定义组件里面的部分动态内容

案例效果如图所示：

任务二、自定义一个提交订单栏的组件，使用具名插槽实现下图的效果。