前言

从维护视图到维护数据，Vue.js让我们可以快速开发应用程序。但是随着业务代码的增长，组件越来越多，组件之间的逻辑耦合严重，使得代码维护非常困难。

接下来，我们将详细分析如何完成由多个组件组成的可重用组件的开发过程。

让我们先看看我们的需求

列表组件quiList.vue

在这一节中，我们主要想完成这样一个列表功能。每行中的列表都是一个组件，列表中可能有按钮组件或箭头组件。点击按钮组件自定义事件，同时可以根据不同的参数确定当前列表是带按钮的列表还是箭头的列表。

先看看quiList.vue

//Qualist . vuetemplate div class=' qui-list ' span class=' list-tips ' { { TipsText } }/span qui-BTN v-: btnclickeevent=' btnclickeevent ' : msg=msg class=' small '/qui-BTN/div/template script import qui button from './Components/qui button . vue ' export default { props : { msg : { default : ' download ' } }，tipstext : { default : ' default copy ' }，Components : { ' qui-BTN ' : qui button }，methods 3: { btnclicevent : function(){ alert(' button click event ')} } }/script基本上就是我们之前学过的知识点。只要记住quiList本身就是一个组件，在这个组件中，我们引入了一个按钮组件quiButton，也就是组件内引用的组件，实际上就是组件的嵌套。注意这里：使用msg=msg，其中冒号表示绑定了变量msg，然后这个属性通过props公开(msg本身公开给按钮中的列表组件)。为了理解它，借用下图：

至于点击事件，也是我们之前学过的事件的绑定。现在，引入一个新问题。有没有一个参数可以确定列表组件的右边是按钮组件？或者箭头组件。

动态组件

Vue提供了一些特定的关键字：is和特定的结构组件来生成动态组件。让我们先修改脚本中的内容：

'脚本导入quiButton从'./components/quiButton.vue“从导入quiArrow”./components/quiArrow . vue ' export default { props : { msg : { default : ' download ' } }，Tiptext : { default : ' default : ' qui-BTN ' }，components : { ' qui-BTN ' : qui button，' qui-arrow ' 3: quiArrow }，Methods :我们注意到currentView还有一个自定义属性，默认值是qui-btn。现在让我们看看模板标签中写了什么：

template div class=' qui-list ' Span class=' list-tips ' { tips text } }/Span component 3360 is=' current view ' v-: btnclickeevent=' click event ' : msg=msg class=' small ' keep-alive/component/div/template，我们删除了qui-btn标记。相反，它是一个组件标签，这是Vue附带的标签，可以用作容器，可以用来保存按钮或箭头。确定此容器包含哪个组件的关键代码是：is='currentView '。当currentView的值为qui-btn时，这个容器是一个按钮组件，当它为qui-arrow时，它是一个箭头组件。我们刚刚为这个变量定义的默认值是qui-btn。

Keep-alive关键字使该组件驻留在内存中。因为动态组件可能需要动态切换，所以当组件发生变化时，保持组件活动可以减少内存消耗。

可以看到，按钮的点击事件和msg信息仍然保留在我们的组件上，与此无关。只要箭头组件中没有出现相同的变量，就不会有冲突。

Qui-list tipsText='自定义副本，右侧默认是按钮' msg='项目符号层'/qui-list qui-list v-: btnclikevent=' test '/qui-list qui-list ref=' child 1 ' tips text='当箭头' currentView=' qui-arrow '/qui-list使用列表组件时。请注意，最后一个qui-list上有一个ref属性，它表示组件集合。当页面上有许多组件时，有几种方法可以获取相应组件的信息：

console.log(这。$children[0]。味精)；//获取console.log(这。$ refs.child1.msg)通过数组；//通过对象集合获取动态组件，不需要使用：is组件。在Vue中，有一个指令叫v-if/v-else/v-else-if，统称为判断指令。使用显示指令v-show，可以决定是否应该根据指定值显示相应的组件。另外，我不会以这种方式展示，只是把它当作一项作业。如果你感兴趣，这仍然是一个建议

生存期

在这里，让我们简单谈谈什么是组件的生命周期。在上图中，我们通过refs获取了组件对象的信息，所以当或者什么时候做这个的时候，组件从引用到调用到销毁(相对较少的操作)有以下几个关键的回调函数：

脚本导出默认值{ components : { ' qui-list ' : quilist }，在create3360 function()之前{}，//created:function(){}在组件实例化之前，//组件实例化beforemount:function () {}，//mount d : function(){//组件编写了console.log(这。$children)到dom结构中；console.log(这。$ refs)；}，beforeupdate:function () {}，//Updated:function () {}在组件更新之前，//组件更新，如修改copyebeforeddestroy 3360 function(){ }，//在组件销毁之前销毁d 3360 function(){ }//组件已被销毁}/脚本，所以如果要使用refs内容，

我还需要学什么

到目前为止，我们已经在三篇文章中学习了关于组件和路由的大部分知识。当然，这不是Vue的全部，但和其他知识点相比，这些都可以算是垫脚石。了解这些对以后其他API的应用会有很大的帮助。下面我列举一些你可以去官网查资料的其他要点，其实并不难。只要有一些小项目的演示练习，你就会发现Vue就是这样的。

过渡

Transition其实就是CSS3的动画和过渡，但是写CSS3就变得像写JS一样，有点类似于格林斯托克的一些思想。

说明

到目前为止，我们已经学习了一些常用的指令，如v-on、v-bind、v-for，以及几个常用的指令，如判断指令、v-show指令和v-model指令(主要用于输入等表单组件)。当你知道了指令的作用，就不难学了。

提出

我认为这种渲染的方法应该仔细研究，它可以帮助我们编写更好的面向对象组件，而学习它的代价在于这个接口更接近于使用原生JS代码。如果有必要，您也可以稍后写一篇关于渲染的文章。

摘要

这三个系列的文章暂时到此结束。有些童靴可能还是觉得没学过Vue。不好意思，可能是我的标题太夸张了，也可能是我举的例子不够清楚，写的东西不太好理解。但没关系。回顾我们的学习过程，可以根据这个知识点的学习过程找到更多的文章。毕竟“唐诗三百首好读，不会写诗也能唱”。当然，只有在学习过程中多练习、多尝试，才能锻炼和巩固知识。至于是浅入后还是深入后，还是由大家来定义！

所有相关代码和公文地址附在文末~ ~ ~

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

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。