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>