Vue组件注册与复用机制详解

Vue组件基础与注册方式

一、组件的概念

组件 (Component) 是 Vue.js 的核心特性之一，用于扩展 HTML 元素并封装可重用的代码。

二、组件的使用方式

组件在使用前必须进行注册，注册方式分为全局注册和局部注册两种。

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 ＞”标签，则无法渲染（且最外层仅允许存在一个根<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-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 以更新组件内容。

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

组件初始化

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

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

写在最后

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

总结

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