Javascript 在自定义呈现函数中为有内容的嵌入项返回Vue组件

我在玩！我在富文本内容字段方面遇到了问题

我正在使用'@contentful/rich text types'和@contentful/rich text html呈现程序模块自定义此块的呈现方式，并显示在富文本内容中链接的一些资源和引用

在nuxt asyncData函数中调用getEntries之后，我的页面组件中有一个描述数据。 我正在使用带有选项的documentToHtmlString函数

一切正常，但我希望使用我已经编写的组件（Post.vue），而不是以ES6模板字符串返回模板。

我知道这是可能的，但我对JS的世界还很陌生

我试图要求组件/post/post.vue，但我不知道如何使用它

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"

呈现富文本字段的Vue组件模板

  <section class="container">
    <div class="columns">
      <div class="column">
       <div v-html="formatContent(description)" /> 
      </div>
    </div>
  </section>

并使用文档中所述的选项自定义documentToHtmlString：

  const embeddedEntryRender = (node) => {
    const { data: { target: entry} } = node

    const fields = entry.fields
    const sys = entry.sys
    // LOOK HERE
    // const postComponent = require('~/components/post/Post')

    return `
      <div class="column is-4">
        <div class="card">

          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <h3 class="title is-4">${fields.title}</h3>
                <div class="subtitle is-6">${fields.description}</div>
              </div>
            </div>

            <div class="content">
            </div>

          </div>
        </div>
      </div> `
  }

  const options = {
    renderNode: {
      [BLOCKS.EMBEDDED_ENTRY]: (node) => embeddedEntryRender(node),
      // [BLOCKS.EMBEDDED_ASSET]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
    }
  }

const embeddedEntryRender=（节点）=>{
常量{data:{target:entry}}=node
常量字段=entry.fields
const sys=entry.sys
//看这里
//const postComponent=require（“~/components/post/post”）
返回`
${fields.title}
${fields.description}
`
}
常量选项={
渲染节点：{
[BLOCKS.EMBEDDED_ENTRY]：（节点）=>embeddedEntryRender（节点），
//[BLOCKS.EMBEDDED_资产]：（节点）=>`${customComponentRenderer（节点）}`
}
}

未检测到错误

--

---

非常感谢

是的，您可以使用不同的npm库在其中定制vue组件，我也遇到了同样的问题

npm i contentful-rich-text-vue-renderer

在模板中：

 <rich-text-renderer :document="document" :nodeRenderers="renderNode" />

---

这方面有更多的配置，只需阅读npm libs文档（虽然不是很好的文档，但我花了很长时间才弄清楚如何传递道具，我必须阅读他们的github代码才能弄清楚lol）

运气好吗？我自己也在做，还没有。我下周就要回去工作了。如果我解决了这个问题，我会告诉你我想你被解雇了。当你是一个自由职业者时，它也应该是情境化的，并试图实现这一点。有人运气好吗？

 <rich-text-renderer :document="document" :nodeRenderers="renderNode" />

    data () {
      return {
        renderNode: [INLINES.ASSET_HYPERLINK]: (node, key, h) => {
            return h('my-vue-component', { key: hey, props: { myProp: 'blah blah' }},'what I want inside the <my-vue-component> tag'`)
      } 
    }

import MyVueComponent from 'wherever/it/is';
Vue.component('my-vue-component', MyVueComponent);