如何在Vue3中检查对象是否为Vue组件?

qzlgjiam  于 2022-11-25  发布在  Vue.js
关注(0)|答案(2)|浏览(619)

有了vue 2,我就可以

import Vue from "vue"

然后执行以下操作

if (!(myComponent instanceof Vue)) return

有没有办法在Vue3中做到这一点?

fcipmucu

fcipmucu1#

这不是一个很好的解决方案,但是您可以检查它是否具有render函数。

if (!(myComponent && typeof myComponent.render  === 'function')) return
bzzcjhmw

bzzcjhmw2#

您可以使用Vue中的h()(hypercript)函数并检查其type属性:

import { h } from 'vue'

function isVueComponent(comp) {
  const vnode = h(comp)

  if (!vnode.type) {
    return false
  }

  // Check if it's just an HTML Element
  if (typeof vnode.type === 'string') {
    return false
  }

  // A component that has render or setup property
  if (vnode.type.setup || vnode.type.render) {
    return true
  }

  // Check if functional component
  // https://vuejs.org/guide/extras/render-function.html#functional-components
  if (vnode.type.emits || vnode.type.props) {
    return true
  }
}

最后一个条件比较棘手,因为没有propsemits属性的函数被视为函数组件。

相关问题