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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
vue下的@change事件的实现
Oct 25 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
node.js如何自定义实现一个EventEmitter
Jul 16 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
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
幼儿园健康教育方案
2014/06/14 职场文书
计生工作先进事迹
2014/08/15 职场文书
你会写请假条吗?
2019/06/26 职场文书