组件实例 ​

$data ​

从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。

• 类型

  ts

  interface ComponentPublicInstance {
    $data: object
  }

$props ​

表示组件当前已解析的 props 对象。

• 类型

  ts

  interface ComponentPublicInstance {
    $props: object
  }

• 详细信息

  这里只包含通过 props 选项声明的 props。组件实例将会代理对其 props 对象上属性的访问。

$el ​

该组件实例管理的 DOM 根节点。

• 类型

  ts

  interface ComponentPublicInstance {
    $el: Node | undefined
  }

• 详细信息

  $el 直到组件挂载完成 (mounted) 之前都会是 undefined。

  • 对于单一根元素的组件，$el 将会指向该根元素。
  • 对于以文本节点为根的组件，$el 将会指向该文本节点。
  • 对于以多个元素为根的组件，$el 将是一个仅作占位符的 DOM 节点，Vue 使用它来跟踪组件在 DOM 中的位置 (文本节点或 SSR 激活模式下的注释节点)。

  TIP

  为保持一致性，我们推荐使用模板引用来直接访问元素而不是依赖 $el。

$options ​

已解析的用于实例化当前组件的组件选项。

• 类型

  ts

  interface ComponentPublicInstance {
    $options: ComponentOptions
  }

• 详细信息

  这个 $options 对象暴露了当前组件的已解析选项，并且会是以下几种可能来源的合并结果：

  • 全局 mixin
  • 组件 extends 的基组件
  • 组件级 mixin

  它通常用于支持自定义组件选项：

  js

  const app = createApp({
    customOption: 'foo',
    created() {
      console.log(this.$options.customOption) // => 'foo'
    }
  })

• 参考 app.config.optionMergeStrategies

$parent ​

当前组件可能存在的父组件实例，如果当前组件是顶层组件，则为 null。

• 类型

  ts

  interface ComponentPublicInstance {
    $parent: ComponentPublicInstance | null
  }

$root ​

当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。

• 类型

  ts

  interface ComponentPublicInstance {
    $root: ComponentPublicInstance
  }

$slots ​

一个表示父组件所传入插槽的对象。

• 类型

  ts

  interface ComponentPublicInstance {
    $slots: { [name: string]: Slot }
  }
  
  type Slot = (...args: any[]) => VNode[]

• 详细信息

  通常用于手写渲染函数，但也可用于检测是否存在插槽。

  每一个插槽都在 this.$slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。默认插槽暴露为 this.$slots.default。

  如果插槽是一个作用域插槽，传递给该插槽函数的参数可以作为插槽的 prop 提供给插槽。

• 参考渲染函数 - 渲染插槽

$refs ​

一个包含 DOM 元素和组件实例的对象，通过