Vue的组件化

组件化是Vue的精髓,Vue就是由一个一个的组件构成的。Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解。这时候又有可能无从下手,因此在这里阐释一下个人对Vue的组件化的理解。

组件的分类

一般来说,组件大致可以分为三类:

  1. 页面级别的组件。
  2. 业务上可复用的基础组件。
  3. 与业务无关的独立组件。

页面级别的组件

页面级别的组件,通常是pages目录下的.vue组件,是组成整个项目的一个大的页面。一般不会有对外的接口。我们通常开发时,主要就是编写这种组件。如下所示:pages下面的Home.vue(主页)和About.vue(关于我们)等都是一个独立的页面,也是一个独立的组件。

  pages
├─ About.vue
└─ Home.vue

业务上可复用的基础组件

这一类组件通常是在业务中被各个页面复用的组件,这一类组件通常都写到components目录下,然后通过import在各个页面中使用。这一类组件通常是实现某个功能,比如外卖中各个页面都会使用到的评分系统。这个部分就可以实现评分功能,可以写成一个独立的业务组件。比如下面的components中的Star.vue就是一个业务组件。这一类组件的编写通常涉及到组件常用的props,slot和自定义事件等。

  components
└─ Star.vue

与业务无关的独立组件

这一类组件通常是与业务功能无关的独立组件。这类组件通常是作为基础组件,在各个业务组件或者页面组件中被使用。目前市面上比较流行的ElementUI和iview等中包含的组件都是独立组件。如果是自己定义的独立组件,比如富文本编辑器等,通常写在utils目录中。

组件的编写

说完了组件的分类,接下来我们谈一谈组件的编写。要写好一个组件,我们需要考虑哪些因素。首先一个组件最重要的两个一定是数据事件。另外,组件开发要考虑可扩展性,在vue中组价你的扩展通过slot来实现。

数据主要是指:dataprop。其中data主要是用于组件内部的数据展示,通常是一个函数。而prop是接收外部数据,涉及到数据的校验,数据的扩展等,是非常重要的一个API。

事件:组件的事件(event)不同于在普通元素身上绑定事件。组件事件应该如何触发,是在父组件中触发还是在组件内部元素身上触发。

slot:主要用于组件的扩展。同样是组件开发非常重要的API。

综上所述:组件开发中有三个非常重要的API,可以戏称为组件开发三要素:prop,eventslot。接下来我们将从组件开发的角度来分别讲述这三个API的使用。并不仅仅是简单的使用。

属性prop

prop定义了组件可以接收哪些可配置的属性。主要是用来接收父组件传递的数据。props接收属性时可以是数组形式,也可以是对象形式。如果不涉及到类型校验或者其他校验可以直接使用数组形式,如果涉及到校验最好使用对象形式。

数组形式:

props:['name','age']

对象形式: 使用对象的形式,可以对数据的类型,是否必填,以及其他特征进行校验。这对于组件化开发非常有利。

Child.vue定义组件

<template>
<div class="container">
姓名:{{name}}
年龄:{{age}}
<button :class = "type">点击</button>
</div>
</template> <script>
export default {
name:'Child',
props:{
name:{
type:String,
require:true
},
age:{
type:Number
},
type:{
//校验: 判断type是否是success,warning和primary之一。
validator:function(value){
return (['success','warning','primary'].indexOf(value)) > -1
}
}
}
}
</script>

Parent.vue使用组件

<Child :name = name  :age = age :type = type></Child>

定义组件时,name是String类型且是必填的,age是number类型非必填的。type是必须是success,warning和primary中的某一个。

自定义事件

如何触发组件上定义的事件:

假设现在我们需要给我们定义的Child组件添加点击事件:这时候我们一般是通过在组件内部的button上通过$emit

触发事件,然后在父组件中监听。

在组件中通过$emit定义事件:

Child.vue

<template>
<div class="container">
姓名:{{name}}
年龄:{{age}}
<!-- 触发事件 -->
<button @click ="$emit('onClick','自定义事件')" :class = "type">点击</button>
</div>
</template>

Parent.vue监听事件

 <Child @onClick = 'handleClick' :age = age :type = type></Child>

slot

我们定义的组件通常会被用到各个地方,但是并不一定能够满足所有的使用场景,有时候我们需要

进行一些功能的扩展。这时候就需要用到slot了。一句话描述slot:就是用来在组件中插入新的内容

比如我们刚刚定义的Child组件,需要插入一段话。那么这时候就需要用到slot了。

Child.vue中使用slot

<template>
<div class="container">
姓名:{{name}}
年龄:{{age}}
<button @click ="$emit('onClick','自定义事件')" :class = "type">点击</button>
<slot></slot>
</div>
</template>

Parent.vue中扩展功能。插入一段话:

<template>
<div class="container">
<Child @onClick = 'handleClick' :age = age :type = type>
<div>这是通过slot插入的一段话</div>
</Child>
</div>
</template>

如上所示:在Child.vue中使用了slot,在Parent.vue中使用CHild时,插入了一段话。

实现了功能的扩展。当然如果需要扩展更多的功能可以使用具名插槽,这里就不具体介绍了。

总结:

组件的分类:

  1. 页面级组件
  2. 业务上可复用的基础组件
  3. 与业务无关的独立功能组件

组件开发三要素

prop,自定义事件,slot是组成组件的三个重要因素。

  1. prop用于定义组件的属性。
  2. 自定义事件用于触发组件的事件。
  3. slot用于组件功能的扩展。

通过合理的使用这三个API,可以更好地帮助我们开发组件。

Vue组件化开发的更多相关文章

  1. 二、vue组件化开发(轻松入门vue)

    轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...

  2. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  3. day69:Vue:组件化开发&Vue-Router&Vue-client

    目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...

  4. Vue 组件化开发

    组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...

  5. Vue 组件化开发之插槽

    插槽的作用 相信看过前一篇组件化开发后,你对组件化开发有了新的认识. 插槽是干什么的呢?它其实是配合组件一起使用的,让一个组件能够更加的灵活多变,如下图所示,你可以将组件当作一块电脑主板,将插槽当作主 ...

  6. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  7. Vue 组件化开发的思想体现

    现实中的组件化思想化思想体现 标准(同一的标准) 分治(多人同时开发) 重用(重复利用) 组合(可以组合使用) 编程中的组件化思想 组件化规范:Web Components 我们希望尽可能多的重用代码 ...

  8. webpack(8)vue组件化开发的演变过程

    前言 真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发,所以项目中只会有一个inde ...

  9. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

随机推荐

  1. Winform中实现向窗体中拖放照片并显示以及拖放文件夹显示树形结构(附代码下载)

    场景 向窗体中拖拽照片并显示效果 向窗体中拖拽文件夹并显示树形结构效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...

  2. aspnet boilerplate 随笔一

    使用abp模板进行项目开发: 1:准备工作:我使用v2.x版本,所以会依赖.net core 2.2 查看并更新本地环境: 更新.net core版本:cmd 运行 dotnet --version查 ...

  3. Android Healthd电池服务分析

    healthd healthd是安卓4.4之后提出来的,监听来自kernel的电池事件,并向上传递电池数据给framework层的BatteryService.BatteryService计算电池电量 ...

  4. 《Hands-On System Programming with Go》之读文件

    有点全,但不是很全. 一次读入,分批次读入,缓存读入. 要记得这几种不同读取的应用场景. package main import ( "bufio" "bytes&quo ...

  5. 5分钟搞定Jenkis

    目录 什么是持续集成 Jenkins简介 Jenkins安装与启动 Jenkins插件安装 全局工具配置 自动安装 本地安装 代码上传至Git服务器 任务的创建与执行 Go项目 JAVA项目 @ 什么 ...

  6. Add the Scheduler Module 添加计划程序模块

    Important 重要 Scheduler requires the Event business class to be in your XAF application model. Follow ...

  7. js中关于constructor与prototype的理解

    1.①__proto__和constructor属性是对象所独有的:② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性. 2. ...

  8. 【js】canvas——Atomic-particle-motion

    原子粒动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. leaflet 结合 Echarts4 实现统计图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  10. ORA-00904:"WM_CONCAT":标识符无效

    原创 Oracle 作者:Root__Liu 时间:2019-11-21 18:49:27  514  0 今天客户现场业务甩给我一个报错让处理,ora-00904:"WM_CONCAT&q ...