vue组件与复用详解

时间：2013.11.05 发布人：club888

已解决问题

谷歌club888用户在2013.11.05提交了关于“西双版纳vue组件与复用详解”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-03-01T22:39:38。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，不知道说什么,送你一朵小红花吧！

希望以下的回答，能够帮助你。

第1个回答

用户名：wangxu孩程饭祖找e 时间：2013.11.06

一、什么是组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展h**TML元素，封装可重用的代码。

二、组件用法

组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。

2.1全局注册后，任何Vue实例都可以使用。来自如：

<divid="app1"><my-componen问答t></my-componen星营于升蛋经t></div>Vue.component('介岩宽息虽五另拿赶my-compone附均沙轻汉云多告缩医nt',{template:'<div>这里是组件的内容</div>'});varapp1=newVue({el:'#app1'});

要甲环在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜my-component></春友速掌形答顾住亚表my-component>的形式来使用组件了

temp除注测门快兰考争流但阳late的DOM结构必须被一个元素包含，如果直接写成“这里是组件的内容”，不带“<div></div＞”是无法渲染的。（而且最外层只能有一个根的<div>标签）

2.2在Vue实例中，使用c完读各乱玉调omponent选起见原征项可以局部注册组件，注册后的组件只有在该实例作用域下想流事空从半天互有效。如：

<div层id="app2"><my-component1></my-component1></div>varapp2=newVue({el:'#app2',components:{'my-component1':{tem名掉开短得行世plate:'<div>这里是局部注册组件的内容</div>'}}});

2.3data必须是函数

除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data、compute岁d、methods等。但是在使用data时茶，和实例稍有区别，data必须是函数，然后将**return出去。

<d运卫异ivid="app3"><my-component3></my-component3></div>Vue.component('my-component3',{template:'<div>{{message}}</div>',dat致首培盾司章a:function(){return{message:'组件内容'}}});varapp3=newVue({el:'#app3'});

一般return的对象不要引用外部的对象，因为如果return弦之油简序冲构听率积怎出的对象引用了外部的一个对象，那这个对陈击教息象就什享的，任何一方修改都会同步。

所以一般给组件返回一个新的独立的data对象。

补充：vue-router组件复用问题

组件系统是Vue的一个重要组成部分，它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件，通过组合组件来组成应用程序，结合vue-router的路由功能将各个组件映射到相应的路由上，通过路由的变化来告诉Vue要在哪里渲染他们，实现各个组件、各个页面之间的跳转导航。

问题

使用vue-router切换路由时会触发组件树的更新，根据定义的路由渲染一个新的组件树，大致的切换过程是这样的：

-停用并移除不需要的组件
-验切换的可行性
-复用没有进行更新的组件
-启用并激活新的组件

具体路由切换控制流程请参考官方文档：切换控制流水线

那vue-router是怎么判断某一个组件可以复用的呢？我们看一下下面这条路由配置：

{path:'post/:postId',name:'post',component:resolve=>require(['./components/Post.vue'],resolve)}

这是通过文章ID加载对应文章页面的路由，第一次访问时，Post.vue这个组件会被渲染到组件树中，mounted安装组件时通过文章ID获取文章内容展示到页面上，当我们访问另一篇文章时，路由参数:postId发生改变，按照我们的预期应该会展示新文章的内容，但是事与愿违。

我们看到的还是之前的文章，虽然路由参数已发生更改，但是vue-router会以为你访问的是Post.vue这个组件，由于之前已经渲染过该组件，所以会直接复用之前的组件，并且不会执行组件中的任何操作包括mounted之类的生命周期函数。

所以我们最终看到的还是原来组件的内容。

那要怎么才能实现我们期望的效果呢？下面介绍一种有效的解决方法

解决方法

我们可以使用watch侦听器来**路由的变化情况，根据路由参数的变化来响应相应的**，具体实现过程是这样的：

定义**获取方法

首先定义一个获取文章的方法，根据文章ID从后台获取对应的文章信息。

methods:{getPost(postId){this.$http.get(`/post/get_post/${postId}`).then((response)=>{if(response.data.code===0){***.post=response.***.post;}});}}

**路由

接着是在路由切换的时候判断目标组件是否是Post.vue组件，这里可以根据定义的路由名称name实现，如果是，我们就可以从路由信息中获取目标文章ID来更新组件内容。

watch:{'$route'(to,from){if(***.name==='post'){this.getPost(to.params.postId);}}}

组件初始化

这里需要注意的是，当组件首次被挂载到组件树上时，对路由的**是无效的，这时我们需要在生命周期钩子mounted对组件进行初始化工作：

mounted(){this.getPost(this.$route.params.postId);}

写在最后

通过上面的方法就可以实现组件内容随路由参数的变化而更新了，有效解决了vue-router组件复用导致路由参数失效的问题。

总结

以上所述是小编给大家介绍的vue组件与复用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:在vue中封装可复用的组件方法vue2实现可复用的轮播图carousel组件详解VUEelement-ui写个复用Table组件的示例代码详解Vue.js组件可复用性的混合(mixin)方式和自定义指令vuemixins组件复用的几种方式（小结）详解打造Vue.js可复用组件Vue.js实现一个漂亮、灵活、可复用的提示组件示例