VueJS - 在組件中呈現動態傳遞的模板

Question

我正在使用 VueJS 2 來構建拖放式布局構建器。 該項目的要求之一是能夠擁有一些允許自定義內容存在於其中的組件（它們將只是該內容的包裝器）。 具體來說，我試圖傳入並渲染另一個在可拖動組件中實現的拖放區域。

基本上，我想通過 prop 將 VueJS 模板傳遞給組件，並在組件內部呈現該模板。 這是必要的，因為我不希望 UI 限制開發人員的需求，因此需要它是真正可擴展的。

在下面的簡單示例中，我希望“ui-element”在其中呈現內容道具並將另一個道具用作數據輸入。

<ui-element
    :content="<draggable :name="contentData"></draggable>"
    contentData="col1"
>
</ui-element>

由於只是輸出模板會對其進行轉義，並且 v-html 指令會將其視為常規 HTML 而不是模板，因此我迷路了，不確定如何完成此操作。

---

我花了大約一個小時或更長時間的谷歌搜索，但沒有運氣。 這讓我有三個選擇：
1）我是第一個需要這個復雜用例的人（不太可能）
2）這樣做在很多層面上都是愚蠢的，甚至沒有人打擾（如果是這樣，請告訴我如何以更聰明的方式獲得這個結果）
3）有一個特殊的超酷JS術語，我根本不知道，這讓我的搜索嘗試徒勞無功

Answer 1

您想改用插槽。

在您的ui-element組件中，定義一個插槽，如下所示：

<template>
  <div>
    <slot name="content"></slot>
  </div>
</template>

然后你可以像這樣傳入draggable組件：

<ui-element contentData="col1">
  <draggable :name="contentData" slot="content"></draggable>
</ui-element>

這是插槽的一個非常基本的小提琴示例。