元件 (Component) 是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重複使用的程式碼。這篇文章主要介紹了vue元件與復用,需要的朋友可以參考下
一、什麼是元件
元件(Component ) 是Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重複使用的程式碼。
二、元件用法
元件在註冊後才可以使用，註冊有全域註冊和局部註冊兩種方式。
2.1 全域註冊後，任何V ue 實例都可以使用。如：
<p id="app1">
<my-component></my-component>
</p>
Vue.component('my-component',{
template: '<p>这里是组件的内容</p>'
});
var app1 = new Vue({
el: '#app1'
});登入後複製
要在父親實例中使用這個元件，必須在實例建立前註冊，之後就可以用＜my-component> 的形式來使用組件了
template的DOM結構必須被一個元素包含， 如果直接寫成“這裡是組件的內容”， 不帶“
標籤）
2.2 在Vue 實例中，使用component選項可以局部註冊元件，註冊後的元件只有在這個實例作用域下才有效。如：
<p id="app2">
<my-component1></my-component1>
</p>
var app2 = new Vue({
el: '#app2',
components:{
'my-component1': {
template: '<p>这里是局部注册组件的内容</p>'
}
}
});登入後複製
2.3 data必須是函數
除了template選項外，元件中還可以像Vue實例那樣使用其他的選項，例如data 、computed 、methods等。但是使用data時，和實例稍有區別， data 必須是函數，然後將資料return 出去。
<p id="app3">
<my-component3></my-component3>
</p>
Vue.component('my-component3',{
template: '<p>{{message}}</p>',
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-router元件重複使用導致路由參數失效的問題。
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
JavaScript產生指定範圍的時間清單
#基於webpack.config.js 參數詳解
nodejs基於express實作檔案上傳的方法
#
以上是vue組件與復用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
