Vue.js中怎么实现一个复用组件

这期内容当中小编将会给大家带来有关Vue.js中怎么实现一个复用组件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的嘉祥网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

首先看看quiList.vue

//quiList.vue

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

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

动态组件

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

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

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

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

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

使用列表组件的时候，只需要给暴露出来的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来获取组件对象的信息，那么在什么时候或者说哪个时机点去做这件事呢，组件从引用到调用到销毁（比较少操作）有以下几个关键回调函数：

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

我还需要学什么

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

过渡

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

指令

目前为止我们学习了一些常用指令，像v-on，v-bind，v-for，还有几个常用的像刚才提到的判断指令和v-show指令，还有v-model指令（主要用于input等表单组件）。

上述就是小编为大家分享的Vue.js中怎么实现一个复用组件了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

当前文章：Vue.js中怎么实现一个复用组件
URL地址：http://mswzjz.cn/article/jssgog.html