這次帶給大家實戰專案中如何實現vue組件復用,實戰專案中如何實現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結構必須被一個元素包含, 如果直接寫成“這裡是組件的內容”, 不含“
p >”是無法渲染的。 (而且最外層只能有一個根的
標籤)
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组件复用导致路由参数失效的问题。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是實戰專案中如何實作vue元件復用的詳細內容。更多資訊請關注PHP中文網其他相關文章!