vue組件與復用的示例分析

這篇文章給大家分享的是有關vue組件與復用的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、什么是組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。

二、組件用法

組件需要注冊后才可以使用，注冊有全局注冊和局部注冊兩種方式。

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></ 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來更新組件內容。

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

組件初始化

這里需要注意的是，當組件首次被掛載到組件樹上時，對路由的監聽是無效的，這時我們需要在生命周期鉤子mounted對組件進行初始化工作：

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

感謝各位的閱讀！關于“vue組件與復用的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！