组件实例 ​

$data ​

从 data 选项返回的对象，由组件使其具有响应性。组件实例代理对其数据对象属性的访问。

• 类型

  ts

  interface ComponentPublicInstance {
    $data: object
  }

$props ​

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

• 类型

  ts

  interface ComponentPublicInstance {
    $props: object
  }

• 详细信息

  只有通过 props 选项声明的属性才会被包括。组件实例代理对其 props 对象属性的访问。

$el ​

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

• 类型

  ts

  interface ComponentPublicInstance {
    $el: Node | undefined
  }

• 详细信息

  $el 在组件 挂载 之前将是 undefined。

  • 对于具有单个根元素的组件，$el 将指向该元素。
  • 对于具有文本根的组件，$el 将指向文本节点。
  • 对于具有多个根节点的组件，$el 将是 Vue 用于跟踪组件在 DOM 中位置的占位符 DOM 节点（一个文本节点，或在 SSR 水合模式中的注释节点）。

  提示

  为了保持一致性，建议使用 模板引用 来直接访问元素，而不是依赖于 $el。

$options ​

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

• 类型

  ts

  interface ComponentPublicInstance {
    $options: ComponentOptions
  }

• 详细信息

  $options 对象公开了当前组件的已解析选项，它是以下可能的来源的合并结果

  • 全局混入
  • 组件 extends 基础
  • 组件混入

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

  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 上公开为一个函数，该函数返回一个包含与该插槽名称对应的 vnodes 的数组。默认插槽公开为 this.$slots.default。

  如果插槽是一个 作用域插槽，则传递给插槽函数的参数可作为插槽的 slot props 传递给插槽。

• 另请参阅 渲染函数 - 渲染插槽

$refs ​

通过 模板引用 注册的 DOM 元素和组件实例的对象。

• 类型

  ts

  interface ComponentPublicInstance {
    $refs: { [name: string]: Element | ComponentPublicInstance | null }
  }

• 另请参阅

  • 模板引用
  • 特殊属性 - ref

$attrs ​

包含组件穿透属性的组件。

• 类型

  ts

  interface ComponentPublicInstance {
    $attrs: object
  }

• 详细信息

  穿透属性 是由父组件传递的属性和事件处理器，但未在子组件中声明为 prop 或发出的事件。

  默认情况下，如果只有单个根元素，则 $attrs 中的所有内容都将自动继承到组件的根元素上。如果组件有多个根节点，则此行为将被禁用，并且可以使用 inheritAttrs 选项显式禁用。

• 另请参阅

  • 穿透属性

$watch() ​

创建监视器的命令式 API。

• 类型

  ts

  interface ComponentPublicInstance {
    $watch(
      source: string | (() => any),
      callback: WatchCallback,
      options?: WatchOptions
    ): StopHandle
  }
  
  type WatchCallback<T> = (
    value: T,
    oldValue: T,
    onCleanup: (cleanupFn: () => void) => void
  ) => void
  
  interface WatchOptions {
    immediate?: boolean // default: false
    deep?: boolean // default: false
    flush?: 'pre' | 'post' | 'sync' // default: 'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
  }
  
  type StopHandle = () => void

• 详细信息

  第一个参数是监视源。它可以是组件属性名字符串、简单点分隔的路径字符串，或一个 getter 函数。

  第二个参数是回调函数。回调函数接收监视源的旧值和新值。

  • immediate：在监视器创建时立即触发回调。第一次调用时旧值将是 undefined。
  • deep：如果源是对象，则强制进行深度遍历，以便在深度突变时触发回调。请参阅 深度监视器。
  • flush：调整回调的刷新时间。请参阅 回调刷新时间 和 watchEffect()。
  • onTrack / onTrigger：调试监视器的依赖项。请参阅 监视器调试。

• 示例

  监视属性名

  js

  this.$watch('a', (newVal, oldVal) => {})

  监视点分隔的路径

  js

  this.$watch('a.b', (newVal, oldVal) => {})

  使用 getter 进行更复杂的表达式

  js

  this.$watch(
    // every time the expression `this.a + this.b` yields
    // a different result, the handler will be called.
    // It's as if we were watching a computed property
    // without defining the computed property itself.
    () => this.a + this.b,
    (newVal, oldVal) => {}
  )

  停止监视

  js

  const unwatch = this.$watch('a', cb)
  
  // later...
  unwatch()

• 另请参阅

  • 选项 - watch
  • 指南 - 监视器

$emit() ​

在当前实例上触发自定义事件。任何额外的参数都将传递给监听器的回调函数。

• 类型

  ts

  interface ComponentPublicInstance {
    $emit(event: string, ...args: any[]): void
  }

• 示例

  js

  export default {
    created() {
      // only event
      this.$emit('foo')
      // with additional arguments
      this.$emit('bar', 1, 2, 3)
    }
  }

• 另请参阅

  • 组件 - 事件
  • emits 选项

$forceUpdate() ​

强制组件实例重新渲染。

• 类型

  ts

  interface ComponentPublicInstance {
    $forceUpdate(): void
  }

• 详细信息

  鉴于 Vue 的全自动响应式系统，这很少需要。可能需要它的唯一情况是，您已使用高级响应式 API 显式创建非响应式组件状态。

$nextTick() ​

全局 nextTick() 的实例版本。

• 类型

  ts

  interface ComponentPublicInstance {
    $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void>
  }

• 详细信息

  与全局版本 nextTick() 的唯一区别是，传递给 this.$nextTick() 的回调函数的 this 上下文将绑定到当前组件实例。

• 另请参阅 nextTick()