如何输出<模板>Vue.js 中的 DOM 标记

发布于 2025-01-14 08:55:12 字数 1221 浏览 3 评论 0原文

我有一个基于 Stencil 构建的自定义库，需要与 Vue 集成，并且该库依赖于浏览器的

例如，我需要将以下代码渲染到 dom：

<my-custom-list>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
  </template>
</my-custom-list>

my-custom-list 然后将获取模板内的所有内容并将其用于列表中的每个项目。

我设法通过使用 v-html 指令让它工作，例如：

<my-custom-list v-html="<template><my-custom-title></my-custom-title><my-custom-description></my-custom-description></template>">
</my-custom-list>

但是，我也希望能够在这个模板标签中使用 Vue 组件，例如：

<my-custom-list>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
    <custom-vue-component></custom-vue-component>
  </template>
</my-custom-list>

网上的一些旧答案建议使用 is 指令能够输出模板标签，例如

但已被弃用。

我什至不确定这是否可能，但任何见解将不胜感激。

原文

I have a custom library built on Stencil that I need to integrate with Vue, and this library relies on the browser's <template /> tag.

For example, I need to render the following code to the dom:

<my-custom-list>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
  </template>
</my-custom-list>

my-custom-list will then get whatever is inside the template and use it for each of the items in the list.

I managed to get it to work by using the v-html directive, for example:

<my-custom-list v-html="<template><my-custom-title></my-custom-title><my-custom-description></my-custom-description></template>">
</my-custom-list>

However, I would also like to be able to use Vue components inside this template tag, like:

<my-custom-list>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
    <custom-vue-component></custom-vue-component>
  </template>
</my-custom-list>

Some old answers online suggest using the is directive to be able to output the template tag, like <div is="template"> but that has been deprecated.

I am not even sure if this is possible, but any insights would be much appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眼泪 2025-01-21 08:55:12

您可以使用 v-pre 指令跳过部分组件的编译。

<my-custom-list v-pre>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
    <custom-vue-component></custom-vue-component>
  </template>
</my-custom-list>

You can use the v-pre directive to skip compilation for parts of your components.

<my-custom-list v-pre>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
    <custom-vue-component></custom-vue-component>
  </template>
</my-custom-list>

回复收藏 0 原文

~没有更多了~