인스턴스 속성(Instance Properties)

$data

• 타입: Object

• 상세:

  컴포넌트 인스턴스의 데이터 객체는 감시됩니다. 컴포넌트 인스턴트 프록시는 data 객체의 속성에 접근할 수 있습니다.

• Options / Data - data

$props

• 타입: Object

• 상세:

  컴포넌트가 받은 현재 props을 나타냅니다. 컴포넌트 인스턴스 프록시는 props 객체의 속성에 접근할 수 있습니다.

$el

• 타입: any

• 읽기 전용

• 상세:

  Vue 인스턴스가 관리하는 컴포넌트 인스턴스인 루트 DOM 요소입니다.

  fragments를 사용하는 컴포넌트의 경우, $ el은 Vue가 DOM에서 구성 요소의 위치를 추적하는 데 사용하는 placeholder DOM 노드입니다. DOM 요소에 직접 액세스하려면 $ el에 의존하는 대신 template refs를 사용하는 것이 좋습니다.

$options

• 타입: Object

• 읽기 전용

• 상세:

  현재 컴포넌트 인스턴스에 사용되는 인스턴스화 옵션입니다. 옵션에 사용자 정의 속성을 포함하려는 경우 유용합니다:

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

$parent

• 타입: Component instance

• 읽기 전용

• 상세:

  현재 인스턴스에 부모 인스턴스가 있는 경우, 부모 인스턴스입니다.

$root

• 타입: Component instance

• 읽기 전용

• 상세:

  현재 컴포넌트 트리의 루트 Vue 인스턴스입니다. 현재 인스턴스에 부모가 없다면 $root 값은 현재 인스턴스입니다.

$slots

• 타입: { [name: string]: (...args: any[]) => Array<VNode> | undefined }

• 읽기 전용

• 상세:

  프로그래밍으로 접근이 가능한 슬롯을 사용한 컨텐츠를 배포할 때 사용합니다. 각 명명된 슬롯은 고유한 속성을 가지고 있습니다(예. v-slot:foo는 this.$slots.foo()에서 찾을 수 있습니다). default 속성은 명명된 슬롯에 포함되지 않은 노드나 v-slot:default의 컨텐츠를 포함합니다.

  this.$slots에 접근하는 것은 렌더 함수로 컴포넌트를 작성할 때 가장 유용합니다.

• 예시:

  <blog-post>
    <template v-slot:header>
      <h1>About Me</h1>
    </template>
  
    <template v-slot:default>
      <p>
        Here's some page content, which will be included in $slots.default.
      </p>
    </template>
  
    <template v-slot:footer>
      <p>Copyright 2020 Evan You</p>
    </template>
  </blog-post>
  

  const { createApp, h } = Vue
  const app = createApp({})
  
  app.component('blog-post', {
    render() {
      return h('div', [
        h('header', this.$slots.header()),
        h('main', this.$slots.default()),
        h('footer', this.$slots.footer())
      ])
    }
  })
  

• 참고:

  • <slot> Component
  • 슬롯을 사용한 컨텐츠 배포
  • 렌더함수- 슬롯

$refs

• 타입: Object

• 읽기 전용

• 상세:

  ref 속성으로 등록된 DOM 구성요소들이나 컴포넌트 인스턴스들로 구성된 객체입니다.

• 참고:

  • Template refs
  • 특수 속성 - ref

$attrs

• Type: Object

• 읽기 전용

• 상세:

  props나 custom events로 인식(및 추출)되지 않는 부모 범위 속성 바인딩과 이벤트를 포함합니다. 컴포넌트에 선언된 props나 custom events가 없을 때, 모든 부모 범위 바인딩을 기본적으로 포함하며 v-bind="$attrs"를 통해 내부 컴포넌트로 전달할 수 있습니다. - 고차 컴포넌트(HOC)를 작성할 때 유용합니다.

• 참고:

  • Non-Prop 속성
  • Options / Misc - inheritAttrs