Vue3中如何在方法内使用导入组件？HighlightJs渲染失败求助

问题根源：v-html只会将字符串解析为原生HTML，不会识别或编译Vue组件标签——哪怕你全局注册了HighlightJs，它也只会被当作普通HTML标签输出，不会被Vue实例化。

正确的做法是放弃拼接HTML字符串，把内容解析成结构化数据，再在模板里通过条件渲染组件：

修改后的代码 #

<script setup lang="ts">
import HighlightJs from "./components/HighlightJs.vue";

// 定义内容块类型，区分文本和代码
type ContentBlock = {
  type: 'text' | 'code';
  content: string;
};

const parseContent = (content: string): ContentBlock[] => {
  const blocks: ContentBlock[] = [];
  const codeSplit = content.split("```");
  
  codeSplit.forEach((block, index) => {
    if (!block.trim()) return; // 跳过空内容块
    
    if (index % 2 === 0) {
      // 文本内容按换行分割成独立段落
      const paragraphs = block.split("\n\n").filter(p => p.trim());
      paragraphs.forEach(p => blocks.push({ type: 'text', content: p }));
    } else {
      // 代码块内容直接存入数组
      blocks.push({ type: 'code', content: block.trim() });
    }
  });
  
  return blocks;
};
</script>

<template>
  <div class="bg-gray-500 text-white p-4 rounded-lg prose">
    <template v-for="(block, index) in parseContent(content.answer)" :key="index">
      <!-- 渲染文本段落 -->
      <p v-if="block.type === 'text'">{{ block.content }}</p>
      <!-- 渲染代码块组件 -->
      <HighlightJs v-else :code="block.content" />
    </template>
  </div>
</template>

关键修改说明 #

• 结构化解析：把原始字符串转换成包含type和content的数组，明确区分文本段落和代码块，彻底避免拼接HTML字符串的思路。
• 模板条件渲染：用v-for遍历解析后的数组，根据type字段选择渲染<p>标签或HighlightJs组件，让Vue正常编译并实例化组件。
• 空内容过滤：处理分割过程中产生的空内容块，避免渲染多余的空元素。

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