Vue js和動態組件和內容

Question

我想在VueJS中為我的項目實現Modal窗口。 就像我在jQuery中一直做的那樣：

• 通過AJAX獲取模態的HTML（HTML是動態的，后端使它成為現實）
• 將HTML代碼附加到BODY

但是VueJS有不同的邏輯，我真的不知道如何創建完全動態的模態窗口。

我可以創建Modal窗口組件並將其附加到body，但我不能將HTML（我從AJAX請求獲得）放在組件內作為模板槽

<slot></slot>. 

那我該怎么做呢？ 也許一些最好的做法？

謝謝

Answer 1

將模式元素設置為您希望HTML內容具有屬性v-html="modalContent" ，然后在您的vue代碼中打開該模式時生成Ajax請求並將生成的HTML存儲到this.modalContent

Answer 2

我解決了

我們需要將我們的模態組件放在“#app”之外，其中包含所需的html（從AJAX獲取）並將該實例作為新的vm啟動。

並創建包裝器來管理它

Modal = { show(), hide(), change() ... }

當然hide方法可以破壞當前的模態窗口VM等等。

所以在那之后我們將擁有功能齊全的模態窗口，希望能幫助別人。