使用Element UI自定义内容弹框，h()函数报错的解决方案

2023-12-13

1分钟阅读时长

问题表现

最近开发中遇到了一个问题，在使用 element ui 中使用 MessageBox 来渲染自定义VNode对话框的时候，出现了下列错误：

globally imported h() can only be invoked when there is an active component instance, e.g. synchronously in a component's render or setup function.

上述错误大概的意思是：h()函数只能用在一个组件实例里，比如组件的render函数或者是setup函数里。

显然，我的代码完全没有涉及到上述提到的内容，如果是框架的问题，这就让问题看起来好像没有那么简单了。

如果你是在使用elementui中如：this.$msgbox()的方式，来渲染自定义内容的弹窗时，首先，确保你正确定义/导入了h函数，比如：

const h = this.$createElement;

而非：

import { h } from 'vue';

首先我写这些代码的时候是按照文档里的demo复制过来的。

根据之前使用的印象，我直接复制了关键代码：

this.$msgbox({
  title: '消息',
  message: h('p', null, [
    h('span', null, '内容可以是 '),
    h('i', { style: 'color: teal' }, 'VNode')
  ]),
})

缺少h函数，记得vue里有个h函数，我就导入

import { h } from 'vue';

保存运行，直接报错