小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
前言
组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。这篇文章主 要介绍了vue组件与复用,需要的朋友可以参考下
一、什么是组件？
组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。
二、使用步骤
2.1 全局注册后，任何Vue 实例都可以使用
代码如下（示例）：
<div id="app1">
<my-component></my-component>
</div>
Vue.component('my-component',{ template: '<div>这里是组件的内容</div>' });
var app1 = new Vue({
el: '#app1'
});
要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜my-component></my- component> 的形式来使用组 件了template的DOM结构必须被一个元素包含， 如果直接写成“这里是组件的内容”， 不带div是无法渲染的。（而且最外层只能有一个根的div标签）
2.2 在Vue 实例中，使用component选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。
代码如下（示例）：
<div id="app2">
<my-component1></my-component1>
</div>
var app2 = new Vue({
el: '#app2',
components:{
'my-component1':{
template: '<div>这里是局部注册组件的内容</div>'
}
}
});
2.3 data必须是函数
除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data 、computed 、methods等。但是在使用data 时，和实例稍有区别， data 必须是函数，然后将数据return 出去。
代码如下（示例）：
<div id="app3">
<my-component3></my-component3>
</div>
Vue.component('my-component3',{
template: '<div>{{message}}</div>',
data: function(){
return { message: '组件内容' }
}
});
var app3 = new Vue({
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){
this.post = response.data.post;
}
});
}
}
监听路由
接着是在路由切换的时候判断目标组件是否是Post.vue组件，这里可以根据定义的路由名称name实现，如果是，我们就可以 从路由信息中获取目标文章ID来更新组件内容。
组件初始化
这里需要注意的是，当组件首次被挂载到组件树上时，对路由的监听是无效的，这时我们需要在生命周期钩子mounted对组件
进行初始化工作：
mounted() {
this.getPost(this.$route.params.postId);
}
写在最后
通过上面的方法就可以实现组件内容随路由参数的变化而更新了，有效解决了vue-router组件复用导致路由参数失效的问题。
总结
以上所述就是给大家介绍的vue组件与复用详解，希望对大家有所帮助,原创不易，期待您的点赞关注与转发评论😜😜😜
