# 인스턴스 속성(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'
      }
    })
    
    1
    2
    3
    4
    5
    6

# $parent

  • 타입: Component instance

  • 읽기 전용

  • 상세:

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

# $root

  • 타입: Component instance

  • 읽기 전용

  • 상세:

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

# $slots

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

  • 읽기 전용

  • 상세:

    프로그래밍으로 접근이 가능한 슬롯을 사용한 컨텐츠를 배포할 때 사용합니다. 각 명명된 슬롯은 고유한 속성을 가지고 있습니다(예. v-slot:foothis.$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>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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())
        ])
      }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  • 참고:

# $refs

# $attrs

  • Type: Object

  • 읽기 전용

  • 상세:

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

  • 참고:

Deployed on Netlify.
Last updated: 2021-05-06, 15:52:04 UTC