資訊專欄INFORMATION COLUMN
摘要：動(dòng)態(tài)組件模板另一種方法是使用某種加載器來加載所需的模板。這是怎么工作的默認(rèn)情況下，支持動(dòng)態(tài)組件。問題是您必須注冊導(dǎo)入您想要使用的所有組件。
最近剛做完建站工具，準(zhǔn)備總結(jié)里面使用到的一些技巧，同時(shí)會做一版簡化的放在 github上。
先來一篇翻譯的文章，和我在項(xiàng)目中使用的動(dòng)態(tài)組件思路一樣，不過缺少了演化的過程，直接給出了最終的解決方案。這篇文章給的場景也很簡單，但要了解這種思想是足夠的。之后再詳細(xì)的總結(jié)我遇到的問題和解決方案，放在更復(fù)雜的場景中。
以下是翻譯正文：
組件并不總是具有相同的結(jié)構(gòu)。有時(shí)需要管理許多不同的狀態(tài)（注：指的是根據(jù)不同狀態(tài)顯示不同組件）。異步加載組件對此操作很有幫助。用例
在 Scrumpy 中組件用于提醒、評論和附件等多個(gè)地方。讓我們看一下評論部分，看看我要表達(dá)的是什么意思。
評論不再只是簡單的文本字段，你希望能夠發(fā)布鏈接，上傳圖片，集成視頻等等。所有這些完全不同的元素都必須在此評論中呈現(xiàn)出來。如果您試圖在一個(gè)組件中執(zhí)行此操作，它很快就會變得一團(tuán)糟。
最常見的評論有鏈接、圖像和視頻
我們?nèi)绾翁幚磉@個(gè)問題?可能大多數(shù)人會判斷所有的情況，加載特定的組件，例如這樣：
但是，如果所支持的模板列表變得越來越長，這就會變得非常混亂和重復(fù)。以我們的評論為例——想要支持嵌入Youtube、Twitter、Github、Soundcloud、Vimeo、Figma……這個(gè)列表是無窮無盡的。
動(dòng)態(tài)組件模板另一種方法是使用某種加載器來加載所需的模板。這允許你寫一個(gè)干凈的組件像這樣:
// comment text
...
// type can be "open-graph", "image", "video"...
看起來好多了，不是嗎?讓我們看看這個(gè)組件是如何工作的。首先，我們更改模板的文件夾結(jié)構(gòu)。
就我個(gè)人而言，我喜歡為每個(gè)組件創(chuàng)建一個(gè)文件夾，因?yàn)樯院罂梢蕴砑痈嘤糜跇邮交蜏y試的文件。當(dāng)然，如何構(gòu)建結(jié)構(gòu)取決于您。
接下來，我們來看看如何構(gòu)建這個(gè) < dynamic-link /> 組件。
這是怎么工作的？默認(rèn)情況下，Vue.js支持 動(dòng)態(tài)組件。問題是您必須注冊/導(dǎo)入您想要使用的所有組件。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105667.html
摘要：實(shí)例組件模板某些網(wǎng)頁中用于多個(gè)位置，例如通知，注釋和附件。動(dòng)態(tài)組件模板另一種方法是使用某種加載器來加載您需要的模板。那么這里發(fā)生了什么默認(rèn)情況下，支持動(dòng)態(tài)組件。超級方便安裝我們的組件后，我們嘗試加載模板。 組件并不總是具有相同的結(jié)構(gòu)。有時(shí)需要管理許多不同的狀態(tài)。異步執(zhí)行此操作會很有幫助。 實(shí)例： 組件模板某些網(wǎng)頁中用于多個(gè)位置，例如通知，注釋和附件。讓我們來一起看一下評論，看一下我表達(dá)...
摘要：，常規(guī)組件，卒。小結(jié)總之呢，上面分析了在中編譯遠(yuǎn)程模板的可能性，最后得出了兩種方法異步組件，應(yīng)該是官方的推薦方法動(dòng)態(tài)組件，變通之法，論壇上發(fā)現(xiàn)的思路當(dāng)然如果有其他方法歡迎交流，本文如果有不嚴(yán)謹(jǐn)不正確的地方也歡迎指出本文發(fā)自我的，原文鏈接我的 說明 有些時(shí)候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時(shí)候似乎很常見，可以直接用 ng-include...
摘要：，常規(guī)組件，卒。小結(jié)總之呢，上面分析了在中編譯遠(yuǎn)程模板的可能性，最后得出了兩種方法異步組件，應(yīng)該是官方的推薦方法動(dòng)態(tài)組件，變通之法，論壇上發(fā)現(xiàn)的思路當(dāng)然如果有其他方法歡迎交流，本文如果有不嚴(yán)謹(jǐn)不正確的地方也歡迎指出本文發(fā)自我的，原文鏈接我的 說明 有些時(shí)候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時(shí)候似乎很常見，可以直接用 ng-include...
摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...
摘要：在這個(gè)組件里面有一些鏈接列表，和，這些列表直接使用編寫按照傳統(tǒng)的寫法，如果我們需要往里面添加鏈接的時(shí)候，每次我們都得添加和標(biāo)簽。所以修改如下這樣我們就把數(shù)據(jù)和視圖分開了，模板里面的代碼也簡潔了很多，不再需要寫很多重復(fù)的代碼。 Vue 的官方文檔 對 Vue 介紹非常詳細(xì)，但官方文檔使用在 HTML 中引入 vue 的方式進(jìn)行講解，而實(shí)際項(xiàng)目中一般使用腳手架如 vue-cli 初始化項(xiàng)目...
閱讀 681·2021-11-15 11:37
閱讀 4143·2021-09-09 09:34
閱讀 3575·2019-08-30 15:52
閱讀 2615·2019-08-29 14:03
閱讀 2858·2019-08-26 13:36
閱讀 1599·2019-08-26 12:16
閱讀 1603·2019-08-26 11:45
閱讀 3497·2019-08-23 18:41
...
// open graph image