javascript - VueJS - 在组件中呈现动态传递的模板

Question

我正在使用 VueJS 2 构建拖放布局构建器。该项目的要求之一是能够拥有一些允许自定义内容存在于内部的组件(它们将只是该内容的包装器)。更具体地说，我正在尝试传入并呈现另一个在可拖动 组件中实现的拖放区域。

基本上，我想通过 prop 将 VueJS 模板传递给组件，并在组件内部呈现该模板。这是必要的，因为我不希望 UI 限制开发人员的需求，因此需要它真正可扩展。

在下面的简单示例中，我希望“ui-element”在其中呈现内容 Prop ，并将另一个 Prop 用作数据输入。

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

因为只输出模板会对其进行转义，而 v-html 指令会将其视为常规 HTML 而不是模板我迷路了，不太确定如何完成此操作。

---

我花了大约一个小时或更长时间进行谷歌搜索，但一无所获。这让我有三个选择:
1) 我是第一个需要这个复杂用例的人(不太可能)
2) 这样做在很多层面上都是愚蠢的，以至于没有人理会(如果是这样，请告诉我如何以更聪明的方式获得这个结果)
3) 有一个特别酷的 JS 术语，我根本不知道它，这使我的搜索尝试徒劳无功

Answer 1

您想使用 slots相反。

在您的 ui-element 组件中，像这样定义一个插槽:

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

然后你可以像这样传入draggable组件:

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

Here's a very basic fiddle example of a slot.