ઘટક ઇન્સ્ટન્સ (Component Instance) ​

$data ​

data ઓપ્શન માંથી return થયેલો object, ઘટક દ્વારા reactive બનાવાયેલ. ઘટક instance તેના data object પરની properties access proxy કરે.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $data: object
  }

$props ​

ઘટકના current, resolved props represent કરતો object.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $props: object
  }

• વિગત (Details)

  ફક્ત props ઓપ્શન દ્વારા declared props સામેલ થશે. ઘટક instance તેના props object પરની properties access proxy કરે.

$el ​

ઘટક instance manage કરી રહ્યો છે તે root DOM node.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $el: any
  }

• વિગત (Details)

  ઘટક mounted થાય ત્યાં સુધી $el undefined હશે.

  • Single root element ધરાવતા ઘટકો માટે, $el તે element ને point કરશે.
  • Text root ધરાવતા ઘટકો માટે, $el text node ને point કરશે.
  • Multiple root nodes ધરાવતા ઘટકો માટે, $el placeholder DOM node હશે જેનો Vue ઉપયોગ DOM માં ઘટકની position track કરવા કરે (text node, અથવા SSR hydration mode માં comment node).

  TIP

  Consistency માટે, $el પર depend કરવાના બદલે elements ની direct access માટે template refs ઉપયોગ કરવાની ભલામણ છે.

$options ​

વર્તમાન ઘટક instance instantiate કરવા ઉપયોગ થયેલા resolved component options.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $options: ComponentOptions
  }

• વિગત (Details)

  $options object વર્તમાન ઘટક માટે resolved options expose કરે અને આ possible sources નું merge result છે:

  • Global mixins
  • Component extends base
  • Component mixins

  સામાન્ય રીતે custom component options support કરવા ઉપયોગ થાય:

  js

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

• આ પણ જુઓ app.config.optionMergeStrategies

$parent ​

Parent instance, જો current instance ધરાવે. Root instance માટે null હશે.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $parent: ComponentPublicInstance | null
  }

$root ​

Current component tree નું root component instance. જો current instance ના parents ન હોય તો value itself હશે.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $root: ComponentPublicInstance
  }

$slots ​

Parent ઘટક દ્વારા pass કરેલ slots represent કરતો object.

• ટાઇપ (Type)

  ts

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

• વિગત (Details)

  સામાન્ય રીતે manually render functions author કરતી વખતે ઉપયોગ થાય, પરંતુ slot present છે કે નહીં detect કરવા પણ ઉપયોગ કરી શકાય.

  દરેક slot this.$slots પર function તરીકે expose થાય જે slot ના name ને corresponding key હેઠળ vnodes ની array return કરે. Default slot this.$slots.default તરીકે expose થાય.

  જો slot scoped slot હોય, slot functions ને pass થયેલા arguments slot ને slot props તરીકે ઉપલબ્ધ છે.

• આ પણ જુઓ રેન્ડર ફંક્શન્સ - Slots Render કરવા

$refs ​

Template refs દ્વારા registered DOM elements અને component instances નો object.

• ટાઇપ (Type)

  ts

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

• આ પણ જુઓ

  • Template refs
  • Special Attributes - ref

$attrs ​

ઘટકના fallthrough attributes ધરાવતો object.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $attrs: object
  }

• વિગત (Details)

  Fallthrough Attributes parent ઘટક દ્વારા pass થયેલા attributes અને event handlers છે, પરંતુ child દ્વારા prop અથવા emitted event તરીકે declared નથી.

  ડિફોલ્ટ રૂપે, $attrs માં બધું ઘટકના root element પર auto inherited થશે જો single root element હોય. Multiple root nodes ધરાવતા ઘટક માટે behavior disabled છે, અને inheritAttrs ઓપ્શન સાથે explicitly disabled કરી શકાય.

• આ પણ જુઓ

  • Fallthrough Attributes

$watch() ​

Watchers create કરવા માટે Imperative API.

• ટાઇપ (Type)

  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

• વિગત (Details)

  પ્રથમ argument watch source છે. તે component property name string, simple dot-delimited path string, અથવા getter function હોઈ શકે.

  બીજો argument callback function છે. Callback watched source ની new value અને old value receive કરે.

  • immediate: watcher creation પર callback immediately trigger કરો. પ્રથમ call પર old value undefined હશે.
  • deep: source object હોય તો deep traversal force કરો, જેથી deep mutations પર callback fire થાય. Deep Watchers જુઓ.
  • flush: callback ની flush timing adjust કરો. Callback Flush Timing અને watchEffect() જુઓ.
  • onTrack / onTrigger: watcher ની dependencies debug કરો. Watcher Debugging જુઓ.

• ઉદાહરણ (Example)

  Property name watch કરવું:

  js

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

  Dot-delimited path watch કરવો:

  js

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

  વધુ complex expressions માટે getter ઉપયોગ કરવું:

  js

  this.$watch(
    // દર વખતે expression `this.a + this.b` different
    // result yield કરે, handler call થશે.
    // computed property define કર્યા વિના
    // computed property watch કરવા જેવું.
    () => this.a + this.b,
    (newVal, oldVal) => {}
  )

  Watcher stop કરવું:

  js

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

• આ પણ જુઓ

  • Options - watch
  • ગાઇડ - Watchers

$emit() ​

Current instance પર custom event trigger કરો. કોઈપણ additional arguments listener ના callback function ને pass થશે.

• ટાઇપ (Type)

  ts

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

• ઉદાહરણ (Example)

  js

  export default {
    created() {
      // ફક્ત event
      this.$emit('foo')
      // additional arguments સાથે
      this.$emit('bar', 1, 2, 3)
    }
  }

• આ પણ જુઓ

  • ઘટક - Events
  • emits ઓપ્શન

$forceUpdate() ​

ઘટક instance ને re-render કરવા force કરો.

• ટાઇપ (Type)

  ts

  interface ComponentPublicInstance {
    $forceUpdate(): void
  }

• વિગત (Details)

  Vue ની fully automatic reactivity system જોતાં આ ભાગ્યે જ જરૂરી હોવું જોઈએ. ફક્ત ત્યારે જ જરૂર પડી શકે જ્યારે advanced reactivity APIs ઉપયોગ કરીને explicitly non-reactive component state create કર્યો હોય.

$nextTick() ​

Global nextTick() નું instance-bound version.

• ટાઇપ (Type)

  ts

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

• વિગત (Details)

  nextTick() ના global version થી ફક્ત એ જ ફરક છે કે this.$nextTick() ને pass થયેલા callback નો this context current component instance સાથે bound હશે.

• આ પણ જુઓ nextTick()