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 相关文章推荐
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php中目录,文件操作详谈
2007/03/19 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python如何实现动态数组
2019/11/02 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python实现感知机模型的示例
2020/09/30 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
公司合作协议书范本
2014/04/18 职场文书
网络妈妈观后感
2015/06/08 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
python运行脚本文件的三种方法实例
2022/06/25 Python