元件例項 ​

$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()