深刻解析vue组件与复用

组件 (Component) 是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素，封装可重用的代码。这篇文章主要介绍了vue组件与复用,须要的朋友能够参考下

1、什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素，封装可重用的代码。 2、组件用法 组件须要注册后才可使用，注册有全局注册和局部注册两种方式。 2.1 全局注册后，任何V ue 实例均可以使用。如：

<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 ＞”是没法渲染的。（并且最外层只能有一个根的

标签） 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)
}
复制代码

看到的仍是以前的文章，虽然路由参数已发生更改，可是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;
      }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
    });//面向1-3年前端人员
  }//帮助突破技术瓶颈，提高思惟能力
}
复制代码

监听路由 接着是在路由切换的时候判断目标组件是不是Post.vue组件，这里能够根据定义的路由名称name实现，若是是，咱们就能够从路由信息中获取目标文章ID来更新组件内容。

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }//欢迎加入全栈开发交流圈一块儿学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提高思惟能力
复制代码

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

mounted() {
  this.getPost(this.$route.params.postId);
}
复制代码

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

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。