vue3 | 在createVNode 或者 h函数中 设置ref

在vue3中使用createVNode 或者 h函数 设置ref

1.1 问题描述

• 在vue3中使用createVNode或者h函数设置ref属性，开发环境下可以正常使用，生产环境中报错Cannot read properties of null (reading 'refs')

1.2 代码片段

• 在element-plus上随便找的一段代码，实际项目的代码比较复杂，就不复现了

  <template>
    <el-button :plain="true" @click="openVn">VNode</el-button>
  </template>
  <script lang="ts" setup>
  import { ref, h } from 'vue'
  import { ElMessage } from 'element-plus'
  const messageRef = ref()
  const openVn = () => {
    ElMessage({
      message: h('div', { ref: messageRef }, [
        h('span', null, 'Message can be '),
        h('i', { style: 'color: teal' }, 'VNode'),
      ]),
    })
  }
  </script>
  // 生产环境下会报错 Cannot read properties of null 
  

1.3解决方案

• 使用函数包含返回

  <template>
    <el-button :plain="true" @click="openVn">VNode</el-button>
  </template>
  <script lang="ts" setup>
  import { ref, h } from 'vue'
  import { ElMessage } from 'element-plus'
  const messageRef = ref()
  const openVn = () => {
    ElMessage({
      message: () => h('div', { ref: messageRef }, [
        h('span', null, 'Message can be '),
        h('i', { style: 'color: teal' }, 'VNode'),
      ]),
    })
  }
  </script>