Non-function value encountered for slot “reference“. Prefer function slots for better performance.

问题截图

问题代码

		h(
          ElPopconfirm,
          {
            title: 'xxx',
            key: Math.random()
          },
          {
            reference: h(
              'span',
              {
                link: true,
                type: 'danger'
              },
              [
                h(
                  ElButton,
                  {
                    link: true,
                    type: 'danger',
                    onClick: () => {}
                  },
                  {
                    default: () => '删除'
                  }
                )
              ]
            )
          }
        )

问题分析

1. 主要问题 vue3 中 h 函数第三个参数需要函数返回
2. 代码中 ElPopconfirm 的 h 函数第三个参数插槽模式，插槽中 reference 直接返回了个 h 函数的渲染结果
3. h 函数的渲染结果是一个对象！
4. 所以说以上你并没有以函数的形式返回，而是返回了一个对象！这下知道如何做了嘛
5. 把 reference: h(x,x,x) 更改为 reference: () => h(x,x,x)就行了
6. 这类型的警告错误就是提醒你 你代码虽然实现了，但是不够完美。一般直接定位到h函数是否函数返回就行了。

解决后代码

		h(
          ElPopconfirm,
          {
            title: 'xxx',
            key: Math.random()
          },
          {
            reference: () => h(
              'span',
              {
                link: true,
                type: 'danger'
              },
              [
                h(
                  ElButton,
                  {
                    link: true,
                    type: 'danger',
                    onClick: () => {}
                  },
                  {
                    default: () => '删除'
                  }
                )
              ]
            )
          }
        )