包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数答案

【问题标题】：Nuxt render function for a string of HTML that contains Vue components包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数
【发布时间】：2019-05-06 23:25:43
【问题描述】：

我正在为 Nuxt 解决这个问题

WIP 的代码沙箱不起作用：https://codesandbox.io/s/zw26v3940m

好的，所以我将 WordPress 作为 CMS，它正在输出一堆 HTML。 HTML 示例如下所示：

'<h2>A heading tag</h2>
<site-banner image="{}" id="123">Slot text here</site-banner>
<p>some text</p>'

请注意，它包含一个 Vue 组件 <site-banner>，上面有一些道具（image 道具是一个 JSON 对象，我为了简洁而省略了）。该组件已全局注册。

我有一个我们编写的组件，名为<wp-content>，它在 Vue 中运行良好，但在 Nuxt 中无法运行。注意这两个渲染函数，一个用于 Vue，另一个用于 Nuxt（显然这是为了举例，我不会同时使用）。

export default {
    props: {
        html: {
            type: String,
            default: ""
        }
    },
    render(h, context) {
        // Worked great in Vue
        return h({ template: this.html })
    }      
    render(createElement, context) {
        // Kind of works in Nuxt, but doesn't render Vue components at all
        return createElement("div", { domProps: { innerHTML: this.html } })
    } 
}

所以最后一个渲染函数在 Nuxt 中有效，只是它不会真正渲染 this.html 中的 Vue 组件，它只是将它们作为 HTML 放在页面上。

那么我如何在 Nuxt 中做到这一点？我想从服务器获取一串 HTML，并将其呈现在页面上，并将任何已注册的 Vue 组件转换为适当的成熟 Vue 组件。基本上是一个小小的“VueifyThis(html)”工厂。

【问题讨论】：

我的一个想法是尝试将 HTML“字符串”转换为 JSX 模板（基本上通过从字符串中删除“）。但我不确定这是否可能，我不能想办法。
那个在 Vue 中有效的函数，在 nuxt 中不有效吗？
@acdcjunior 不，它不在 Nuxt 2.6.3 中
您是否将nuxt.render 添加到您的应用变量中？
@jalil 不，我没有，那是什么以及如何？

标签： vue.js dom render nuxt.js

【解决方案1】：

感谢 Nuxt 团队的 Jonas Galvez，oTechie，这是最有效的方法。

export default {
  props: {
    html: {
      type: String,
      default: ""
    }
  },
  render(h) {
    return h({
      template: `<div>${this.html}</div>`
    });
  }
};

然后在您的nuxt.config.js 文件中：

    build: {
        extend(config, ctx) {
            // Include the compiler version of Vue so that <component-name> works
            config.resolve.alias["vue$"] = "vue/dist/vue.esm.js"
        }
    }

【讨论】：

【解决方案2】：

如果你使用v-html 指令来渲染html？

喜欢：

<div v-html="html"></div>

我认为它会完成这项工作。

【讨论】：

不，不幸的是，这不会解压 Vue 组件。
如果你用这个呢？ alligator.io/vuejs/v-runtime-template

【解决方案3】：

这里有一个关于codesandbox的解决方案：https://codesandbox.io/s/wpcontent-j43sp

重点是将动态组件包装在dynamicComponent()模板中的<div>（即HTML标签）中，因为它只能有一个根元素，而且它来自Wordpress，源字符串本身可以有任意数量的顶级元素。

并且必须导入WpContent 组件。

【讨论】：

感谢这个例子，我没有使用 'vue-feather-icons' 你知道为什么吗？
您到底想做什么？你的代码在线吗？

【解决方案4】：

这就是我使用 Nuxt 3 的方式：

<script setup lang="ts">
import { h } from 'vue';

const props = defineProps<{
  class: string;
  HTML: string
}>();
const VNode = () => h('div', { class: props.class, innerHTML: props.HTML })
</script>
<template>
  <VNode />
</template>

不需要更新nuxt.config.ts。
希望对你们中的一些人有所帮助。

【讨论】：

【解决方案5】：

我对您的代码框进行了一些更改。现在似乎工作了https://codesandbox.io/s/q9wl8ry6q9

我更改但不起作用的事情：

在当前版本的 Vue 中模板只能有一个根元素
v-bind 只接受变量，但你传入一个字符串。

【讨论】：