Vue3程序化创建组件时vue3-highlightjs失效报错问题

你在程序化生成组件时，每次循环都用createApp()创建了全新的Vue应用实例，但这些子实例没有安装vue3-highlightjs插件，导致v-highlightjs指令不存在，触发了Cannot read properties of undefined (reading 'deep')错误——这个错误是Vue在找不到指令时，内部处理指令绑定的逻辑抛出的。

不要手动创建DOM元素再挂载新应用，改用Vue的h函数和render函数动态渲染组件，这样组件会复用主应用已安装的插件和指令：

import { h, render } from 'vue'
import CodeSnippet from './CodeSnippet.vue'

// 你的组件方法中修改为：
renderCodeSnippet() {
  const container = this.$refs.container
  container.innerHTML = '';
  
  codeSnippetSysthem.codeSnippetarray.forEach((item, i) => {
    const currentPosition = i;
    const _setTop = this.startX + (currentPosition % this.rowAmount) * 300;
    const _setLeft = this.startY + Math.floor(currentPosition / this.rowAmount) * 300;

    // 定义组件props
    const componentProps = {
      setTop: _setLeft.toString(),
      setLeft: _setTop.toString(),
      title: item.title,
      codeContent: item.codeContent,
      codeSnippetPosition: currentPosition,
      // 直接在props中绑定事件，比手动addEventListener更符合Vue规范
      onMouseup: this.RenderCodeSnippet
    }

    // 创建虚拟节点并渲染到容器
    const vnode = h(CodeSnippet, componentProps)
    render(vnode, container)
  })
}

放弃vue3-highlightjs指令，直接在组件内调用highlight.js的API，彻底避免指令上下文问题：

1. 安装依赖（如果没装的话）：

npm install highlight.js

2. 修改CodeSnippet.vue：

<template>
  <div :style="{ top: setTop, left: setLeft }"> <!-- 假设你需要定位样式 -->
    <h3>{{ title }}</h3>
    <pre><code :class="`language-${language}`" ref="codeElement">{{ codeContent }}</code></pre>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineProps } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/solarized-light.css'

// 定义组件接收的props
const props = defineProps({
  setTop: String,
  setLeft: String,
  title: String,
  codeContent: String,
  codeSnippetPosition: Number,
  language: {
    type: String,
    default: 'javascript'
  }
})

const codeElement = ref(null)

// 高亮代码的函数
const highlightCode = () => {
  if (codeElement.value) {
    hljs.highlightElement(codeElement.value)
  }
}

// 挂载时高亮，代码更新时重新高亮
onMounted(highlightCode)
watch(() => props.codeContent, highlightCode)
</script>

这种方式不需要在main.js中全局安装插件，组件完全独立，不管是静态引用还是程序化渲染都能正常工作。

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