componentOptions配置选项的作用和用法

最新推荐文章于 2025-06-17 15:55:33 发布

DragonWar%

最新推荐文章于 2025-06-17 15:55:33 发布

阅读量7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 移动开发 ViewUI

原文链接：https://juejin.im/post/5c8b225ce51d4549af4dc3e8

本文深入探讨了Vue中vnode的componentOptions属性，解释了如何通过它判断组件、获取组件名称，以及在不同渲染方式下组件标签的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

componentOptions 可以通过vnode.componentOptions来访问，用来挂载部分组件选项来使用的。包括

{ Ctor, tag, propsData, listeners，children } 。非组件的componentOptions为空。
// 源码中体现代码如下：
// return a placeholder vnode
  const name = Ctor.options.name || tag
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )

复制代码

用法

可以用来判断当前的vnode是不是组件。

const isComponent = vnode.componentOptions
复制代码

可以用来获取组件的名称

const vonde = vnode.componentOptions.tag
复制代码

前提条件是在渲染组件的时候是采用字符串的形式，例如

const comA = Vue.extend({})
const comB = new Vue({
  components: {
    comA
  },
  render (h) {
    // return h('div', [h('comA')]) // 此时获取的vnode.componentOptions.tag为comA
    // return h('div', [h(comA)])  // 此时获取的vnode.componentOptions.tag为undefined
})
复制代码

最合适的获取组件名称的方式应该为：

// 注意此时的componentOptions.tag为模版或者render书写的标签字符串，根据用户的书写可能不统一
// 最好的方式还是使用componentOptions.Ctor.options.name
const componentOptions = vnode.componentOptions;
const componentName = componentOptions && componentOptions.Ctor.options.name || componentOptions.tag
复制代码