深刻解析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，快速升職加薪，走上人生巔峯。