Vue.js的复用组件开发流程完整记录


Posted in Javascript onNovember 29, 2018

前言

从维护视图到维护数据,Vue.js 让我们快速地开发应用。但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难。

接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。

下面先看看我们的需求

列表组件quiList.vue

本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表。

Vue.js的复用组件开发流程完整记录

首先看看quiList.vue

//quiList.vue
<template>
 <div class="qui-list">
 <span class="list-tips">{{tipsText}}</span>
 <qui-btn v-on:btnClickEvent="btnClickEvent" :msg=msg class="small"></qui-btn>
 </div>
</template>

<script>
 import quiButton from '../components/quiButton.vue'
 export default{
 props:{
  msg: {
  default: '下载'
  },
  tipsText: {
  default: '默认的文案'
  }
 },
 components: {
  'qui-btn': quiButton
 },
 methods:{
  btnClickEvent:function(){
   alert('按钮点击事件')
  }
 }
 }
</script>

上面的知识点基本上就是我们之前学过的,只不过记住quiList本身是一个组件,而在这个组件里面,我们又引入了按钮组件quiButton,也就是组件内引用组件,实际上就是组件的嵌套,注意到这里:msg=msg的使用,这里冒号表示绑定的是一个变量msg,然后这个属性通过props暴露出去(本身在按钮中就暴露了msg给列表组件使用),借用下面一张图理解下:

Vue.js的复用组件开发流程完整记录

至于点击事件,也是我们之前学习过的事件的绑定。现在引入一个新问题,是否有一个参数,可以决定列表组件的右侧是放置按钮组件呢?还是箭头组件。

动态组件

Vue中提供了一些特定关键字:is和特定的结构<component>来生成动态组件,让我们修改下script里面的内容先:

<script>
 import quiButton from '../components/quiButton.vue'
 import quiArrow from '../components/quiArrow.vue'
 export default{
 props:{
  msg: {
  default: '下载'
  },
  tipsText: {
  default: '默认的文案'
  },
  currentView:{
  default: 'qui-btn'
  }
 },
 components: {
  'qui-btn': quiButton,
  'qui-arrow': quiArrow
 },
 methods: {
  clickEvent: function () {

  }
 }
 }
</script>

首先我们先Import多一个箭头组件,在components中添加一个自定义标签‘qui-arrow',注意到我们多了一个currentView的自定义属性,默认值是qui-btn,现在再看看template标签里面写什么:

<template>
 <div class="qui-list">
 <span class="list-tips">{{tipsText}}</span>
 <component :is="currentView" v-on:btnClickEvent="clickEvent" :msg=msg class="small" keep-alive></component>
 </div>
</template>

我们把qui-btn标签去掉了,取而代之的是一个component标签,这是Vue自带的一个标签,可以把它当作一个容器,这个容器可以用来装按钮,也可以用来装箭头。决定这个容器装的是哪个组件的关键代码在于:is="currentView",当currentView的值为qui-btn的时候,这个容器就是按钮组件,当它是qui-arrow的时候,就是箭头组件。而我们刚才给这个变量定义的默认值是qui-btn。

keep-alive关键字保持这个组件在内存中是常驻的,由于动态组件可能需要动态切换,这样保持组件活跃可以减少组件变化时候的内存消耗。

可以看到我们的component上还保留着按钮的点击事件和msg信息,这些没有关系,只要箭头组件中不出现同样的变量就不会发生冲突。

<qui-list tipsText="自定义文案,默认右边是按钮" msg="弹层"></qui-list>
<qui-list v-on:btnClickEvent="test"></qui-list>
<qui-list ref="child1" tipsText="最右边是箭头" currentView="qui-arrow"></qui-list>

使用列表组件的时候,只需要给暴露出来的currentView指定一个值,就可以决定右侧是按钮还是箭头了。注意最后一个qui-list上有一个ref的属性,这个属性代表组件集合,当页面中有很多组件的时候,可以通过几种方法来获取对应的某个组件的信息:

console.log(this.$children[0].msg);//通过数组获取
console.log(this.$refs.child1.msg);//通过对象集合获取

其实关于动态组件,不一定要用:is+component来实现,在Vue中有一个指令叫做v-if / v-else / v-else-if,统称判断指令,配合展示指令v-show,可以根据指定的值来决定对应的组件是否应该展示,另外这种做法我不展示了,就当做一个作业吧,有兴趣的还是建议实战一下,毕竟我们也只是教大家入门学习,后面还是希望大家能够自己去扩展学习。

生命周期

这里简单讲一下什么是组件的生命周期,上面我们通过refs来获取组件对象的信息,那么在什么时候或者说哪个时机点去做这件事呢,组件从引用到调用到销毁(比较少操作)有以下几个关键回调函数:

<script>
 export default {
 components: {
  'qui-list': quiList
 },
 beforeCreate:function(){},//组件实例化之前
 created:function(){},//组件实例化了
 beforeMount:function(){},//组件写入dom结构之前
 mounted:function(){//组件写入dom结构了
  console.log(this.$children);
  console.log(this.$refs);
 },
 beforeUpdate:function(){},//组件更新前
 updated:function(){},//组件更新比如修改了文案
 beforeDestroy:function(){},//组件销毁之前
 destroyed:function(){}//组件已经销毁
 }
</script>

所以要想使用refs的内容,就需要在组件写入dom之后才能开始调用哦!

我还需要学什么

目前为止,我们三篇文章已经学了大部分的关于组件和路由的知识,当然这并不是Vue的全部,只是相对于其他的知识点,这些可以算是一个垫脚石,看懂了这些,对后面其他API的应用,帮助很大。下面我列举一些其他的,后续大家可以去官网查看资料的一些关键点,其实都不难,只要有一些小小的项目demo实践,你会发现Vue也不过如此。

过渡

过渡其实就是CSS3动画,transition这些,只是写CSS3变成好像在写JS一样,有点类似于greenSock的一些思想。

指令

目前为止我们学习了一些常用指令,像v-on,v-bind,v-for,还有几个常用的像刚才提到的判断指令和v-show指令,还有v-model指令(主要用于input等表单组件)。当知道指令作用的时候,学习起来其实并不难。

Render

渲染这个方法是我觉得应该用心去学习的,它可以方便我们写出更好的面向对象的组件,而学习它的成本在于这个接口更接近于原生JS代码的使用。如果有需要,后续也可以写一篇关于Render的文章。

总结

三篇系列文暂时在这里告一段落,有些童靴可能到这里还是觉得没有学会Vue,对不起,可能是我的标题太夸张了,也可能因为我的例子还不够清晰,文笔也还不好理解。不过没关系,回顾我们的学习历程,你可以按照这个知识点的学习过程,去找更多的文章,毕竟“熟读唐诗三百首,不会作诗也会吟”嘛。当然,学习过程中我们自己更多的练习和尝试才能锻炼巩固知识。至于浅入之后是浅出还是深出,还是要靠大家自己去定义了!

文末附上所有相关代码和官方文档地址~~~

http://cn.vuejs.org/v2/guide/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
javascript实现考勤日历功能
Nov 29 #Javascript
vsCode安装使用教程和插件安装方法
Aug 24 #Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 #Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 #Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 #Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 #Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 #Javascript
You might like
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php使用session二维数组实例
2014/11/06 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python循环输出三角形图案的例子
2019/11/22 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
学年自我鉴定范文
2013/10/01 职场文书
2013年军训通讯稿
2014/02/05 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
付款承诺函范文
2015/01/21 职场文书
公司感谢信范文
2015/01/22 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers