componentOptions配置选项的作用和用法

本文深入探讨了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
  )

复制代码
用法
  1. 可以用来判断当前的vnode是不是组件。

    const isComponent = vnode.componentOptions
    复制代码
  2. 可以用来获取组件的名称

    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
    })
    复制代码
  3. 最合适的获取组件名称的方式应该为:

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值