Vue如何从数据库字符串渲染自定义Emoji组件？

这个问题我之前也踩过坑！核心原因是你用了v-html输出Vue组件标签，但Vue的v-html只会解析纯HTML内容，根本不会编译Vue组件——所以你写的<Emoji .../>被当作普通的自定义HTML标签输出了，自然不会渲染出预期的表情样式。

下面给你两种解决方案，优先推荐第一种，也是最符合Vue设计理念的最优方案：

方案一：利用emoji-mart-vue的内置能力拆分渲染（推荐） #

emoji-mart-vue本身就提供了表情索引功能，我们可以先把原始文本拆分成「普通文本」和「表情代码」两部分，然后分别渲染文本和Emoji组件，完全避开v-html的局限：

<template>
  <span class="message">
    <!-- 循环拆分后的内容片段 -->
    <template v-for="(part, index) in splitMessage" :key="index">
      <!-- 识别到表情代码就渲染Emoji组件 -->
      <Emoji v-if="isValidEmoji(part)" :emoji="part" :size="16" />
      <!-- 否则渲染普通文本 -->
      <span v-else>{{ part }}</span>
    </template>
  </span>
</template>

<script>
// 导入需要的模块，包括emoji索引用于验证表情有效性
import { Emoji, emojiIndex } from 'emoji-mart-vue'

export default {
  components: { Emoji },
  props: {
    // 接收数据库传来的原始文本
    rawMessage: {
      type: String,
      required: true
    }
  },
  computed: {
    splitMessage() {
      // 用正则匹配所有::包裹的表情代码（支持带肤色后缀的格式）
      const emojiPattern = /(:[a-z0-9-_]+::skin-tone-\d:)|(:[a-z0-9-_]+:)/gi
      // 拆分文本并过滤空片段
      return this.rawMessage.split(emojiPattern).filter(segment => segment)
    }
  },
  methods: {
    isValidEmoji(code) {
      // 通过emoji索引验证是否为有效表情代码
      return code.startsWith(':') && code.endsWith(':') && emojiIndex.search(code).length > 0
    }
  }
}
</script>

这个方案的优势： #

• 完全遵循Vue的响应式渲染逻辑，没有DOM操作的副作用
• 避免了v-html带来的XSS安全风险（直接渲染文本更安全）
• 利用emoji-mart的内置索引自动校验表情有效性，不会渲染无效的表情代码

方案二：手动编译组件（仅适用于特殊场景） #

如果你因为某些原因必须用字符串转组件的方式，可以通过Vue的createVNode和render函数手动编译组件，但这种方式需要自己处理DOM和响应式，相对繁琐：

<template>
  <span class="message" ref="messageWrapper"></span>
</template>

<script>
import { Emoji } from 'emoji-mart-vue'
import { createVNode, render } from 'vue'

export default {
  components: { Emoji },
  props: {
    rawMessage: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.renderDynamicContent()
  },
  // 监听文本变化，重新渲染
  watch: {
    rawMessage: 'renderDynamicContent'
  },
  methods: {
    renderDynamicContent() {
      const wrapper = this.$refs.messageWrapper
      if (!wrapper) return

      // 清空容器
      wrapper.innerHTML = ''

      const emojiPattern = /(:[a-z0-9-_]+::skin-tone-\d:)|(:[a-z0-9-_]+:)/gi
      const segments = this.rawMessage.split(emojiPattern).filter(s => s)

      segments.forEach(segment => {
        if (segment.startsWith(':') && segment.endsWith(':')) {
          // 创建Emoji组件的虚拟节点
          const emojiVNode = createVNode(Emoji, { emoji: segment, size: 16 })
          // 渲染到容器中
          render(emojiVNode, wrapper)
        } else {
          // 普通文本直接创建文本节点插入
          wrapper.appendChild(document.createTextNode(segment))
        }
      })
    }
  }
}
</script>

注意： #

这个方案需要手动处理DOM更新，而且如果原始文本包含恶意HTML代码，会存在XSS风险，所以除非有特殊需求，否则优先用方案一。

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