利用VUE異步組件、動態加載組件，實現自定義組件順序、動態綁定傳入子組件的props、動態綁定監聽子

marser 發布于2019-08-26 10:30 / 2997人閱讀

摘要：發現了動態組件異步組件這個東西簡直是救命啊動態組件異步組件思路分析有了動態組件這個東西之后，我們就可以根據綁定不同的值來渲染不同的組件。每個組件要傳給子組件的值和接收子組件的事件也可以動態的綁定上去。

推動我實現這個功能的業務背景

最近接到一個讓我很頭疼的需求：產品要求我們系統頁面上所有的模塊都支持順序的變動。
比如有模塊A、B、C、D，可以無序的展示在頁面上，我剛聽到這個需求的時候我是崩潰的，如果是在項目開發之前提出這個需求，那么我的前期頁面的架構肯定不會直接寫死的。現在，如果想滿足這個需求，我只能翻掉之前的頁面重新開發.....
目前項目是有八個模塊，我是每個模塊封裝一個多帶帶的組件，然后再index頁面統一引入。

救命稻草

瀏覽了一番vue的官網，還是有所收獲的。發現了動態組件 & 異步組件這個東西！！！簡直是救命啊！！！

動態組件：

異步組件：

思路分析

有了動態組件這個東西之后，我們就可以根據:is綁定不同的值來渲染不同的組件。比如，拿到后臺給我們返回的要渲染組件順序的數組，我們通過循環數組，構建出一個最終我們想要的數據格式。關鍵點在于動態修改 () => import("")里面的值。每個組件要傳給子組件的值和接收子組件emit的事件也可以動態的綁定上去。好了，廢話不多說了，貼代碼吧！

代碼

首先是HTML層：

js層：

2.FixStatus組件：

3.ServiceStatus組件：

接口返回的數據：

{"code":"0000","msg":"請求成功！","data":[{"id":0,"tempName":"ServiceStatus","options":""""},{"id":1,"tempName":"Volume","options":""""},{"id":2,"tempName":"FixStatus","options":""""}]}

data的數組就是我們可以自定義順序的數組。好了，是不是可以隨意的玩起來了！下面看一下demo頁面效果吧。

五百萬項目的效果

可以看到：頁面組件的排列順序就是根據接口返回的順序排列的、每個子組件props得到的值也是可以的、控制臺console是我點擊不同組件，emit給父組件的值。
這是我目前想到最妥當的方案，如果有巨佬有更好的思路，歡迎指導！扣扣 602353272。
溜了溜了....

GPU云服務器云服務器 vuejs動態組件父子組件-動態渲染動態添加組件微信子組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106290.html

Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數組元素并觸發視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數據的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構建數據驅動的Web界面的庫。 Vue通過簡單 API提供高效的數據綁定和靈活的組件系統輕量數據綁定指令插件化架構從傳統后臺MVC 向REST API + 前端MV*遷移DOM是數據的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
Vue面試中，經常會被問到的面試題/知識點(2019改進版)

摘要：在第一版的基礎上進行了優化，新增一些面試題知識點，對一些知識點進行更加深入的描述。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。改變中的狀態的唯一途徑就是顯式地提交。這兩個可以在不進行刷新的情況下，操作瀏覽器的歷史紀錄。在第一版的基礎上進行了優化，新增一些面試題/知識點，對一些知識點進行更加深入的描述。一、對于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 評論0 收藏0
vue組件自學

摘要：在較高層面上，組件是自定義元素，的編譯器為它添加特殊功能。這時可以把特性直接添加到組件上不需要事先定義添加屬性之后，它會被自動添加到的根元素上。下面是一個例子在本例中，子組件已經和它外部完全解耦了。 Vue組件什么是組件？組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的...

iKcamp 2019-08-01 17:59 評論0 收藏0
VUE2.0學習筆記

摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素，可以使用包裹。 1.前言安裝直接用引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 評論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0