目录:一、组件的特点
二、组件的使用
三、组件之间的通信
四、内容分发slot(插槽)
概述:组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,也可以封装可重用的代码,组件系统让开发人员可以用独立可复用的小组件来构建大型应用。
组件的出现,能够让开发人员以不同的组件,来划分不同的功能模块,将来需要什么样的功能,去调用对应的组件即可。
组件注册分为:全局注册和局部注册
一、组件的特点
1、方便重复使用
2、减少代码重复冗余
3、便于多人协同开发
4、有助于提高开发效率
5、提升整个项目的可维护性
Tip: 通常,代码中一些没有见过的自定义标签,如<my-component>等,就是组件。每一个标签代表一个组件,组件一旦注册成功,就可以复用,可以在很多需要的地方直接使用即可。
举例,比如 element和Vant 就是两个典型的提供了很多内置组件的UI框架。
element:
Vant:
二、组件的使用
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、子组件接收父组件传进来的值
效果如下:
(二)子组件向父组件通信
父组件向子组件传值通过props实现,反过来子组件向父组件传值需要通过$emit()方法向父组件暴露一个事件,然后父组件在处理这个事件的方法中获取子组件传过来的数据。
主要步骤:
① 在子组件中通过$emit向父组件暴露一个事件。
② 在父组件中处理子组件暴露出来的事件,并接收子组件传过来的值。
四、内容分发slot(插槽)
插槽(Slot)是Vue提出来的一个概念,正如名字一样,当组件的内容由父组件决定时,就会用到slot。内容分发非常适用于“固定部分”+“动态部分”的组件场景。固定部分可以是结构固定,也可以是逻辑固定,从而使编写的组件更加灵活,实现组件的高度复用。
1、单个插槽
在子组件中使用特殊的<slot>元素就可以为这个组件开启一个slot。在父组件模板中,插入在子组件标签内的所有内容将替代子组件的slot标签和内容。
2、具名插槽
在前面的案例中不难看出,在组件中使用了slot之后,组件的部分内容变成了动态的。如果一个组件中有多部分的内容都是动态的,则需要为slot元素指定一个name属性,具有name属性的插槽称之为具名插槽。具名插槽可以分发多个内容,也可以与单个插槽共存。
以下是一个简单的示例:
1. 创建一个名为child-component的子组件:
2. 在父组件中使用`child-component`,并使用插槽插入内容:
在这个示例中,我们在child-component中使用了<slot></slot>来预留一个插槽位置。然后,在父组件parent-component中,我们使用了<child-component>标签,并在其中插入了一段文本。当渲染parent-component时,这段文本将替换掉child-component中的插槽位置。