Vue3中resolveComponent返回[object Object]，如何替换短码为组件？

你当前的方法行不通，因为v-html只能渲染纯HTML字符串，而resolveComponent()返回的是Vue组件对象，直接把它转成字符串就会显示[object Object]。要正确渲染组件，得把文本和短码拆分后分别处理，用Vue的动态组件能力来渲染FaqItem。

具体实现步骤： #

1. 拆分文本与短码
   把原始文本按[faq]拆分，区分普通文本和短码部分，生成一个包含文本段和组件标识的数组：

   import { ref, resolveComponent } from 'vue';
   
   const textSegments = ref([]);
   
   const parseTextWithShortcodes = (rawText) => {
     // 用[faq]作为分隔符拆分，保留分隔符本身
     const parts = rawText.split(/(\[faq\])/);
     return parts.map(part => {
       if (part === '[faq]') {
         return { type: 'component', name: 'FaqItem' };
       } else {
         // 把换行符转成HTML换行，也可以用CSS的white-space: pre-wrap替代
         return { type: 'text', content: part.replace(/\r\n/g, '<br>') };
       }
     });
   };
   
   // 初始化解析文本
   textSegments.value = parseTextWithShortcodes(props.data.text);
   

2. 模板中分别渲染文本与组件
   遍历拆分后的数组，文本段用v-html渲染，组件段用Vue的<component>动态渲染：

   <div class="block prose xl:mt-12">
     <template v-for="(segment, idx) in textSegments" :key="idx">
       <span v-if="segment.type === 'text'" v-html="segment.content"></span>
       <component v-else :is="resolveComponent(segment.name)"></component>
     </template>
   </div>
   

补充说明： #

• 如果只需要处理[faq]这一个特定短码，也可以简化拆分逻辑，比如直接找到[faq]的位置，将文本拆成前半段、组件、后半段三部分。
• 若原始文本里的换行不需要转成<br>，可以给容器添加CSS样式white-space: pre-wrap来保留换行格式。

内容的提问来源于stack exchange，提问作者Loosie94