Vue.js的動態組件模板

組件並不老是具備相同的結構。有時須要管理許多不一樣的狀態。異步執行此操做會頗有幫助。

實例：
組件模板某些網頁中用於多個位置，例如通知，註釋和附件。讓咱們來一塊兒看一下評論，看一下我表達的意思是什麼。 評論如今再也不僅僅是簡單的文本字段。您但願可以發佈連接，上傳圖像，集成視頻等等。必須在此註釋中呈現全部這些徹底不一樣的元素。若是你試圖在一個組件內執行此操做，它很快就會變得很是混亂。

處理方式
咱們該如何處理這個問題？可能大多數人會先檢查全部狀況，而後在此以後加載特定組件。像這樣的東西：

可是，若是支持的模板列表變得愈來愈長，這可能會變得很是混亂和重複。在咱們的評論案例中 - 只想到支持Youtube，Twitter，Github，Soundcloud，Vimeo，Figma的嵌入......這個列表是無止境的。

動態組件模板 另外一種方法是使用某種加載器來加載您須要的模板。這容許你編寫一個像這樣的乾淨組件：

看起來好多了，不是嗎？讓咱們看看這個組件是如何工做的。首先，咱們必須更改模板的文件夾結構。

就我的而言，我喜歡爲每一個組件建立一個文件夾，由於能夠在之後添加更多用於樣式和測試的文件。固然，您但願如何構建結構取決於你本身。

接下來，咱們來看看如何<dynamic-link />構建此組件。

那麼這裏發生了什麼？默認狀況下，Vue.js支持動態組件。問題是您必須註冊/導入要使用的全部組件。

這裏沒有任何東西，由於咱們想要動態地使用咱們的組件。因此咱們能夠作的是使用Webpack的動態導入。與計算值一塊兒使用時，這就是魔術發生的地方 - 是的，計算值能夠返回一個函數。超級方便！

安裝咱們的組件後，咱們嘗試加載模板。若是出現問題咱們能夠設置後備模板。也許這對向用戶顯示錯誤消息頗有幫助。

結論
若是您有一個組件的許多不一樣視圖，則可能頗有用。

易於擴展。
它是異步的。模板僅在須要時加載。
保持代碼乾淨。
基本上就是這樣！

若是你已經使用過這種技術，我很想聽聽你的看法，謝謝！