这次给大家带来实战项目中如何实现vue组件复用，实战项目中如何实现vue组件复用的注意事项有哪些，下面就是实战案例，一起来看一下。
一、什么是组件
组件 (component) 是 vue.js 最强大的功能之一。组件可以扩展 html 元素，封装可重用的代码。
二、组件用法
组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。
2.1 全局注册后，任何v ue 实例都可以使用。如：
<p id="app1">      <my-component></my-component>    </p>vue.component('my-component',{  template: '<p>这里是组件的内容</p>'});var app1 = new vue({  el: '#app1'});
要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜my-component></my- component> 的形式来使用组件了
template的dom结构必须被一个元素包含， 如果直接写成“这里是组件的内容”， 不带“<p> 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来更新组件内容。
watch: {  '$route' (to, from) {    if(to.name === 'post'){      this.getpost(to.params.postid);    }  }}
组件初始化
这里需要注意的是，当组件首次被挂载到组件树上时，对路由的监听是无效的，这时我们需要在生命周期钩子mounted对组件进行初始化工作：
mounted() {  this.getpost(this.$route.params.postid);}
写在最后
通过上面的方法就可以实现组件内容随路由参数的变化而更新了，有效解决了vue-router组件复用导致路由参数失效的问题。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue项目中watch的immediate使用
create-react-app配置eslint步骤详解
以上就是实战项目中如何实现vue组件复用的详细内容。