利用VUE異步組件、動態(tài)加載組件，實現(xiàn)自定義組件順序、動態(tài)綁定傳入子組件的props、動態(tài)綁定監(jiān)聽子

marser 發(fā)布于2019-08-26 10:30 / 3000人閱讀

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

推動我實現(xiàn)這個功能的業(yè)務背景

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

救命稻草

瀏覽了一番vue的官網(wǎng)，還是有所收獲的。發(fā)現(xiàn)了動態(tài)組件 & 異步組件這個東西?。。『喼笔蔷让。。?！

動態(tài)組件：

異步組件：

思路分析

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

代碼

首先是HTML層：

js層：

2.FixStatus組件：

3.ServiceStatus組件：

接口返回的數(shù)據(jù)：

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

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

五百萬項目的效果

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

云服務器 GPU云服務器 vuejs動態(tài)組件父子組件-動態(tài)渲染動態(tài)添加組件微信子組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106290.html

Vue_Vue權(quán)威指南

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

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

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

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

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

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

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

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

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

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