Skip to content
On this page

옵션: 렌더링

template

컴포넌트의 문자열 템플릿입니다.

  • 타입:

    ts
    interface ComponentOptions {
      template?: string
    }
  • 세부 사항:

    template 옵션을 통해 제공된 템플릿은 런타임에서 즉시 컴파일되지만, 템플릿 컴파일러가 포함된 Vue 빌드를 사용할 때만 지원됩니다. 그러나 이름에 runtime 단어가 포함된 vue.runtime.esm-bundler.js라는 템플릿 컴파일러는 Vue 빌드에 포함되어있지 않습니다. 다른 빌드의 자세한 내용은 dist 파일 가이드를 참고하세요.

    문자열이 #로 시작하면 querySelector로 사용되고, 선택한 엘리먼트의 innerHTML을 템플릿 문자열로 사용합니다. 이를 통해 네이티브 <template> 엘리먼트를 사용하여 소스 템플릿을 작성할 수 있습니다.

    동일한 컴포넌트에 render 옵션도 있는 경우, template은 무시됩니다.

    앱의 루트 컴포넌트에 template 또는 render 옵션이 지정되지 않은 경우, Vue는 마운트된 엘리먼트의 innerHTML을 템플릿으로 사용하려고 시도합니다.

    보안 참고 사항

    신뢰할 수 있는 템플릿 소스만 사용해야 합니다. 사용자가 제공한 컨텐츠를 템플릿으로 사용하면 안됩니다. 자세한 내용은 가이드 - 보안 참고.

render

컴포넌트의 가상 DOM 트리를 프로그래밍 방식으로 반환하는 함수입니다.

  • 타입:

    ts
    interface ComponentOptions {
      render?(this: ComponentPublicInstance) => VNodeChild
    }
    
    type VNodeChild = VNodeChildAtom | VNodeArrayChildren
    
    type VNodeChildAtom =
      | VNode
      | string
      | number
      | boolean
      | null
      | undefined
      | void
    
    type VNodeArrayChildren = (VNodeArrayChildren | VNodeChildAtom)[]
  • 세부 사항:

    render는 문자열 템플릿의 대안으로, 템플릿 전체를 JavaScript 프로그래밍 능력을 활용하여, 컴포넌트의 렌더링 출력을 선언할 수 있습니다.

    예를 들어 싱글 파일 컴포넌트(SFC)에 있는 것처럼, 미리 컴파일된 템플릿은 빌드 시 render 옵션으로 컴파일됩니다. 컴포넌트에 rendertemplate이 모두 있는 경우, render가 더 높은 우선 순위를 갖습니다.

  • 참고:

compilerOptions

컴포넌트의 템플릿의 런타임 컴파일러 옵션을 구성합니다.

  • 타입:

    ts
    interface ComponentOptions {
      compilerOptions?: {
        isCustomElement?: (tag: string) => boolean
        whitespace?: 'condense' | 'preserve' // 기본 값: 'condense'
        delimiters?: [string, string] // 기본 값: ['{{', '}}']
        comments?: boolean // 기본 값: false
      }
    }
  • 세부 사항:

    이 환경설정(config) 옵션은 전체 빌드(예: 브라우저에서 템플릿을 컴파일할 수 있는 독립 실행형 vue.js)를 사용할 때만 적용됩니다. 앱 레벨의 app.config.compilerOptions와 동일한 옵션을 지원하며, 현재 컴포넌트가 더 높은 우선 순위를 갖습니다.

  • 참고: app.config.compilerOptions

slots

An option to assist with type inference when using slots programmatically in render functions. Only supported in 3.3+.

  • Details

    This option's runtime value is not used. The actual types should be declared via type casting using the SlotsType type helper:

    ts
    import { SlotsType } from 'vue'
    
    defineComponent({
      slots: Object as SlotsType<{
        default: { foo: string; bar: number }
        item: { data: number }
      }>,
      setup(props, { slots }) {
        expectType<
          undefined | ((scope: { foo: string; bar: number }) => any)
        >(slots.default)
        expectType<undefined | ((scope: { data: number }) => any)>(
          slots.item
        )
      }
    })
옵션: 렌더링 has loaded