一、什么是組件

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

二、組件用法

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

2.1 全局注冊(cè)后，任何V ue 實(shí)例都可以使用。如：      

 <div id="app1">
      <my-component></my-component>
    </div>
Vue.component('my-component',{
  template: '<div>這里是組件的內(nèi)容</div>'
});
var app1 = new Vue({
  el: '#app1'
});

 要在父實(shí)例中使用這個(gè)組件，必須要在實(shí)例創(chuàng)建前注冊(cè)，之后就可以用＜my-component></my- component> 的形式來(lái)使用組件了

template的DOM結(jié)構(gòu)必須被一個(gè)元素包含， 如果直接寫成“這里是組件的內(nèi)容”， 不帶“<div></ div ＞”是無(wú)法渲染的。（而且最外層只能有一個(gè)根的<div>標(biāo)簽）

2.2 在Vue 實(shí)例中，使用component選項(xiàng)可以局部注冊(cè)組件，注冊(cè)后的組件只有在該實(shí)例作用域下有效。如：

    <div id="app2">
      <my-component1></my-component1>
    </div>
var app2 = new Vue({
  el: '#app2',
  components:{
   'my-component1': {
     template: '<div>這里是局部注冊(cè)組件的內(nèi)容</div>'
   }
  }
}); 

2.3 data必須是函數(shù)

除了template選項(xiàng)外，組件中還可以像Vue實(shí)例那樣使用其他的選項(xiàng)，比如data 、computed 、methods等。但是在使用data時(shí)，和實(shí)例稍有區(qū)別， data 必須是函數(shù)，然后將數(shù)據(jù)return 出去。

    <div id="app3">
      <my-component3></my-component3>
    </div>
Vue.component('my-component3',{
  template: '<div>{{message}}</div>',
  data: function(){
    return {
      message: '組件內(nèi)容'
    }
  }
});
var app3 = new Vue({
  el: '#app3'
});

 一般return的對(duì)象不要引用外部的對(duì)象，因?yàn)槿绻鹯eturn 出的對(duì)象引用了外部的一個(gè)對(duì)象， 那這個(gè)對(duì)象就是共享的， 任何一方修改都會(huì)同步。

所以一般給組件返回一個(gè)新的獨(dú)立的data對(duì)象。

補(bǔ)充：vue-router 組件復(fù)用問(wèn)題

組件系統(tǒng)是Vue的一個(gè)重要組成部分，它可以將一個(gè)復(fù)雜的頁(yè)面抽象分解成許多小型、獨(dú)立、可復(fù)用的組件，通過(guò)組合組件來(lái)組成應(yīng)用程序，結(jié)合vue-router的路由功能將各個(gè)組件映射到相應(yīng)的路由上，通過(guò)路由的變化來(lái)告訴Vue要在哪里渲染他們，實(shí)現(xiàn)各個(gè)組件、各個(gè)頁(yè)面之間的跳轉(zhuǎn)導(dǎo)航。

問(wèn)題

使用vue-router切換路由時(shí)會(huì)觸發(fā)組件樹的更新，根據(jù)定義的路由渲染一個(gè)新的組件樹，大致的切換過(guò)程是這樣的：

- 停用并移除不需要的組件
- 驗(yàn)證切換的可行性
- 復(fù)用沒(méi)有進(jìn)行更新的組件
- 啟用并激活新的組件

具體路由切換控制流程請(qǐng)參考官方文檔：切換控制流水線

那vue-router是怎么判斷某一個(gè)組件可以復(fù)用的呢？ 我們看一下下面這條路由配置：

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

這是通過(guò)文章ID加載對(duì)應(yīng)文章頁(yè)面的路由，第一次訪問(wèn)時(shí)，Post.vue這個(gè)組件會(huì)被渲染到組件樹中，mounted安裝組件時(shí)通過(guò)文章ID獲取文章內(nèi)容展示到頁(yè)面上，當(dāng)我們?cè)L問(wèn)另一篇文章時(shí)，路由參數(shù):postId發(fā)生改變，按照我們的預(yù)期應(yīng)該會(huì)展示新文章的內(nèi)容，但是事與愿違。

我們看到的還是之前的文章，雖然路由參數(shù)已發(fā)生更改，但是vue-router會(huì)以為你訪問(wèn)的是Post.vue這個(gè)組件，由于之前已經(jīng)渲染過(guò)該組件，所以會(huì)直接復(fù)用之前的組件，并且不會(huì)執(zhí)行組件中的任何操作包括mounted之類的生命周期函數(shù)。

所以我們最終看到的還是原來(lái)組件的內(nèi)容。

那要怎么才能實(shí)現(xiàn)我們期望的效果呢？下面介紹一種有效的解決方法

解決方法

我們可以使用watch偵聽器來(lái)監(jiān)聽路由的變化情況，根據(jù)路由參數(shù)的變化來(lái)響應(yīng)相應(yīng)的數(shù)據(jù)，具體實(shí)現(xiàn)過(guò)程是這樣的：

定義數(shù)據(jù)獲取方法

首先定義一個(gè)獲取文章的方法，根據(jù)文章ID從后臺(tái)獲取對(duì)應(yīng)的文章信息。

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

監(jiān)聽路由

接著是在路由切換的時(shí)候判斷目標(biāo)組件是否是Post.vue組件，這里可以根據(jù)定義的路由名稱name實(shí)現(xiàn)，如果是，我們就可以從路由信息中獲取目標(biāo)文章ID來(lái)更新組件內(nèi)容。

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

組件初始化

這里需要注意的是，當(dāng)組件首次被掛載到組件樹上時(shí)，對(duì)路由的監(jiān)聽是無(wú)效的，這時(shí)我們需要在生命周期鉤子mounted對(duì)組件進(jìn)行初始化工作：

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

寫在最后

通過(guò)上面的方法就可以實(shí)現(xiàn)組件內(nèi)容隨路由參數(shù)的變化而更新了，有效解決了vue-router組件復(fù)用導(dǎo)致路由參數(shù)失效的問(wèn)題。

總結(jié)

以上所述是小編給大家介紹的vue組件與復(fù)用詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論