VUE项目中组件的创建-引入-注册-使用

什么是组件化？组件化就是将一个完整的页面根据功能拆分成多个小的功能块，每个功能块独立的完成自己的功能不同组件的组合就构成了我们一个完整的页面，这个页面可以根据需要随时更换新的组件，这样更加方便管理，并且大大提高了页面的扩展性。也更加容易维护每一个拆分后的组件可以根据功能拆分成更小的功能组件。任何组件都可以被抽象成一颗组件树组件的使用如何使用组件构建界面？1、新建组件—新建一个vue文件：如Hea

刘晓伟-liu

5899人浏览 · 2020-05-31 08:49:08

刘晓伟-liu · 2020-05-31 08:49:08 发布

什么是组件化？

组件化就是将一个完整的页面根据功能拆分成多个小的功能块，每个功能块独立的完成自己的功能
不同组件的组合就构成了我们一个完整的页面，这个页面可以根据需要随时更换新的组件，这样更加方便管理，并且大大提高了页面的扩展性。也更加容易维护
每一个拆分后的组件可以根据功能拆分成更小的功能组件。
任何组件都可以被抽象成一颗组件树
在这里插入图片描述

组件的使用

如何使用组件构建界面？

1、新建组件—新建一个vue文件：如Header.vue

在这里插入图片描述

2、引入组件—在需要引入这个组件的vue文件中引入新建的文件(Header.vue)

3、注册组件—将引入的vue文件（如Header.vue）添加到components中

4、使用组件—在template标签中使用添加的模板标签

在这里插入图片描述

最终显示效果

在这里插入图片描述

这就完成了一次完整的组件从创建-引入-注册-使用的过程

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^