Vue.js的复用组件开发流程
本文由蔡述雄发表
接下来咱们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。vue
下面先看看咱们的需求数组
列表组件quiList.vue
本节咱们主要要完成这样一个列表功能，每一行的列表是一个组件，列表内可能出现按钮组件或者箭头组件，点击按钮组件能够自定义事件，同时能够根据不一样的参数来决定当前列表是带按钮的列表or带箭头的列表。dom
首先看看quiList.vueide
//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中提供了一些特定关键字：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标签里面写什么：ui
<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。this
keep-alive关键字保持这个组件在内存中是常驻的，因为动态组件可能须要动态切换，这样保持组件活跃能够减小组件变化时候的内存消耗。spa
能够看到咱们的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，对不起，多是个人标题太夸张了，也可能由于个人例子还不够清晰，文笔也还很差理解。不过不要紧，回顾咱们的学习历程，你能够按照这个知识点的学习过程，去找更多的文章，毕竟“熟读唐诗三百首，不会做诗也会吟”嘛。固然，学习过程当中咱们本身更多的练习和尝试才能锻炼巩固知识。至于浅入以后是浅出仍是深出，仍是要靠你们本身去定义了！
文末附上全部相关代码和官方文档地址~~~
此文已由做者受权腾讯云+社区发布，更多原文请点击
搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！