Question

我正在尝试为Nuxt解决此问题

在制品的代码和框不起作用：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）”工厂。

Answer 1

以下是关于codeandbox的解决方案：https://codesandbox.io/s/wpcontent-j43sp

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

并且必须导入WpContent组件。

Answer 2

这是有效的方法，也是最干净的方法，这要归功于Nuxt团队的oTechie的乔纳斯·加尔维兹（Jonas Galvez）。

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 wp-content works
            config.resolve.alias["vue$"] = "vue/dist/vue.esm.js"
        }
    }

Answer 3

如果您使用v-html指令呈现html？

喜欢：

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

我认为它将完成工作。

Answer 4

我对您的密码和邮箱做了一些更改。似乎现在可以工作了https://codesandbox.io/s/q9wl8ry6q9

我更改的东西无效：

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

Nuxt渲染函数，用于包含Vue组件的HTML字符串

4 个答案: