Question

是否可以不编译默认插槽？

还是可以在编译内部HTML之前访问它们？

我想使用一个组件的默认插槽作为动态创建的另一个组件的模板。

这似乎是不可能的，也就是说，我看了一会儿却什么也没找到……但是像v-if这样的指令确实阻止了内容的编译。在哪里可以访问仍未编译的内容？

一个例子如下：

<my-component>
  <ul>
    <li v-for="a in b">{{a.text}}</li>
  </ul>
</my-component>

我需要以字符串形式获取内容，即：

  <ul>
    <li v-for="a in b">{{a.text}}</li>
  </ul>

在编译之前。

我试图在组件生命周期的每个步骤中获取默认的插槽内容，但我只能对其进行编译。

编辑：好吧，我将尝试解释我真正要实现的目标：

我具有这些组件，它们是某种内容持有者（选项卡），可以在它们之间进行切换。它们是另一个组件（标签容器）的一部分。问题是我希望能够以许多不同的方式配置和初始化我的标签页。示例：

<tabs-container :tabs="[
  {title: 'Tab 4', content: '<p>Lore ipsum...</p>', url: 'tab4'},
  {title: 'Tab 5', content: '<p>Lore ipsum...</p>', url: 'tab5'}
]">
  <tab title="Tab 1" url="tab1">
    <!-- This is bound to the parent data -->
    <ul>
     <li v-for="a in b">{{a.text}}</li>
    </ul>
  </tab>
  <tab title="Tab 2" component="my-other-component" :data="myData"/>
  <tab title="Tab 3" load="true" url="tab3"/>
</tabs-container>

实际上，在这里我几乎可以做所有事情，但是Tab 3却可以，因为它的内容已加载，需要更改，而且这是不可能的。

因此，在挂载此选项卡之前，我应该获取其属性，将其合并到我的选项卡阵列中，然后从插槽中将其删除。

但是，如果我不安装插槽，则需要以相同的方式对待其中的所有选项卡，并将它们包含在我的全局选项卡数组中（我无法使用插槽中的选项卡组件进行此操作）。

但是，如果这样做，我需要能够以字符串的形式获取插槽中的innerHTML内容，并将其用作动态本地组件的模板-动态创建的本地组件。

使用动态字符串作为模板来创建这样的组件是可以的，但是我的问题是从插槽中获取了这个字符串。

我希望我有道理：）

编辑2：

另一种可能的解决方案：

我在一个装有v-if =“ test” 的容器中有一个内容。如果我理解得很好，如果test错误，那么我的内容将不会被编译。如果它是真的，那就会。因此，如果测试为假，我可以从哪里获得v-if的内容？必须有一个内部隐藏属性，我可以在其中访问此信息。

有人知道吗？

非常感谢！

Answer 1

您想到的解决方案（获取插槽的原始未编译模板以便在运行时动态生成组件）不是理想的解决方案。

如果组件模板是预编译的（例如，通过vue-loader），则不可能以字符串形式获取模板源，因为它在最终版本中不存在–模板被编译为JavaScript渲染功能。

您的TabsContainer和Tab组件都做得太多：

TabsContainer组件通过tabs道具（作为数据）和/或作为直接显示为插槽的<tab>组件来接受制表符。 tabs道具不是必需的；只需使用v-for在模板中直接将数据呈现为插槽即可。
Tab组件以三种不同方式之一工作：
1. 内容是在其默认广告位中预先定义的
2. 通过component和data道具提供的内容
3. 以load prop设置为true异步加载（由我假定的Tab组件）的内容

您的TabContainer和Tab组件应该非常简单且“笨拙”（没有太多逻辑）。如果您需要逻辑，例如需要通过API获取某些选项卡的内容，则应由父组件执行此操作，或定义一个包装器组件来执行此操作。

事实上，在这里我可以做几乎所有事情，但是Tab 3却可以，因为它的内容加载需要更改，而且不可能。

这是我最难以理解的地方。您要获取组件模板的内容（例如带有{{ }}标记的内容）还是纯HTML？如果是前者，则需要compile it at runtime。在这两种情况下，提取内容后仍然可以呈现选项卡，只需使用v-if或v-for即可将动态选项卡呈现为选项卡容器的插槽。

我不确定您所说的“需要变异”是什么意思；即使Tab模板的某些部分需要响应数据/内容的变化而进行更改，仍然可以通过渲染Tab来完全实现，就像通常渲染任何类型的动态数据时一样。

对我来说，很难提供一个能够打勾每个框的解决方案；如果您可以提供fiddle或codesandbox那就好。

将广告位的HTML用作原始（未编译）模板

1 个答案: