資訊專欄INFORMATION COLUMN
摘要：發(fā)現(xiàn)了動(dòng)態(tài)組件異步組件這個(gè)東西簡(jiǎn)直是救命啊動(dòng)態(tài)組件異步組件思路分析有了動(dòng)態(tài)組件這個(gè)東西之后，我們就可以根據(jù)綁定不同的值來(lái)渲染不同的組件。每個(gè)組件要傳給子組件的值和接收子組件的事件也可以動(dòng)態(tài)的綁定上去。
推動(dòng)我實(shí)現(xiàn)這個(gè)功能的業(yè)務(wù)背景
最近接到一個(gè)讓我很頭疼的需求：產(chǎn)品要求我們系統(tǒng)頁(yè)面上所有的模塊都支持順序的變動(dòng)。
比如有 模塊A、B、C、D，可以無(wú)序的展示在頁(yè)面上，我剛聽到這個(gè)需求的時(shí)候我是崩潰的，如果是在項(xiàng)目開發(fā)之前提出這個(gè)需求，那么我的前期頁(yè)面的架構(gòu)肯定不會(huì)直接寫死的。現(xiàn)在，如果想滿足這個(gè)需求，我只能翻掉之前的頁(yè)面重新開發(fā).....
目前項(xiàng)目是有八個(gè)模塊，我是每個(gè)模塊封裝一個(gè)多帶帶的組件，然后再index頁(yè)面統(tǒng)一引入。
救命稻草
瀏覽了一番vue的官網(wǎng)，還是有所收獲的。發(fā)現(xiàn)了動(dòng)態(tài)組件 & 異步組件這個(gè)東西?。。『?jiǎn)直是救命?。。?！
動(dòng)態(tài)組件：
異步組件：
思路分析
有了動(dòng)態(tài)組件這個(gè)東西之后，我們就可以根據(jù):is綁定不同的值來(lái)渲染不同的組件。比如，拿到后臺(tái)給我們返回的要渲染組件順序的數(shù)組，我們通過(guò)循環(huán)數(shù)組，構(gòu)建出一個(gè)最終我們想要的數(shù)據(jù)格式。關(guān)鍵點(diǎn)在于動(dòng)態(tài)修改 () => import("")里面的值。每個(gè)組件要傳給子組件的值和接收子組件emit的事件也可以動(dòng)態(tài)的綁定上去。好了，廢話不多說(shuō)了，貼代碼吧！
代碼
首先是HTML層：
js層：
2.FixStatus組件：
組件名：FixStatus page
props的值：{{options}}
3.ServiceStatus組件：
組件名：ServiceStatus page
props的值：{{options}}
接口返回的數(shù)據(jù)：
{"code":"0000","msg":"請(qǐng)求成功！","data":[{"id":0,"tempName":"ServiceStatus","options":""""},{"id":1,"tempName":"Volume","options":""""},{"id":2,"tempName":"FixStatus","options":""""}]}
data的數(shù)組就是我們可以自定義順序的數(shù)組。好了，是不是可以隨意的玩起來(lái)了！下面看一下demo頁(yè)面效果吧。
五百萬(wàn)項(xiàng)目的效果
可以看到：頁(yè)面組件的排列順序就是根據(jù)接口返回的順序排列的、每個(gè)子組件props得到的值也是可以的、控制臺(tái)console是我點(diǎn)擊不同組件，emit給父組件的值。
這是我目前想到最妥當(dāng)?shù)姆桨?，如果有巨佬有更好的思路，歡迎指導(dǎo)！ 扣扣 602353272。
溜了溜了....
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106290.html
摘要：效率不高，很多多余，稱之為臟檢查。通過(guò)索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問(wèn)題自定義指令自定義指令提供一種機(jī)制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)。 Vue通過(guò)簡(jiǎn)單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量 數(shù)據(jù)綁定 指令 插件化 架構(gòu)從傳統(tǒng)后臺(tái)MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...
摘要：在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題知識(shí)點(diǎn)，對(duì)一些知識(shí)點(diǎn)進(jìn)行更加深入的描述。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程。改變中的狀態(tài)的唯一途徑就是顯式地提交。這兩個(gè)可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。 在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題/知識(shí)點(diǎn)，對(duì)一些知識(shí)點(diǎn)進(jìn)行更加深入的描述。 一、對(duì)于MVVM的理解？ MVVM 是 Model-View-Vie...
摘要：在較高層面上，組件是自定義元素，的編譯器為它添加特殊功能。這時(shí)可以把特性直接添加到組件上不需要事先定義添加屬性之后，它會(huì)被自動(dòng)添加到的根元素上。下面是一個(gè)例子在本例中，子組件已經(jīng)和它外部完全解耦了。 Vue組件 什么是組件？ 組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的...
摘要：添加事件偵聽器時(shí)使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。差別在哪里將特性名轉(zhuǎn)換為從開始支持語(yǔ)法糖，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的偵聽器。如果需要條件渲染多個(gè)元素，可以使用包裹。 1.前言 安裝 直接用 引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...
摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...
閱讀 3027·2023-04-25 22:16
閱讀 2365·2021-10-11 11:11
閱讀 3301·2019-08-29 13:26
閱讀 658·2019-08-29 12:32
閱讀 3471·2019-08-26 11:49
閱讀 3096·2019-08-26 10:30
閱讀 2013·2019-08-23 17:59
閱讀 1580·2019-08-23 17:57
