選項：渲染

template

元件的字串模板。

型別

interface ComponentOptions {
  template?: string
}

詳情
透過 template 選項提供的模板將在執行時即時編譯。它僅在包含模板編譯器的Vue構建版本中受支援。包含“runtime”一詞的Vue構建版本（例如 vue.runtime.esm-bundler.js）中不包含模板編譯器。有關不同構建版本的詳細資訊，請參閱dist檔案指南。
如果字串以 # 開頭，它將被用作 querySelector 並使用選中元素的 innerHTML 作為模板字串。這允許使用原生的 <template> 元素來編寫源模板。
如果同一組件中存在 render 選項，則忽略 template。
如果您的應用程式的根元件沒有指定 template 或 render 選項，Vue 將嘗試使用掛載元素的 innerHTML 作為模板。
安全提示
僅使用您信任的模板源。不要使用使用者提供的模板。有關詳細資訊，請參閱安全指南。

render

一個函式，以程式設計方式返回元件的虛擬DOM樹。

型別

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的全部程式設計能力來宣告元件的渲染輸出。
預編譯的模板，例如單檔案元件中的模板，在構建時編譯成 render 選項。如果元件中同時存在 render 和 template，則 render 具有更高的優先順序。
參閱
- 渲染機制
- 渲染函式

compilerOptions

配置元件模板的執行時編譯器選項。

型別

interface ComponentOptions {
  compilerOptions?: {
    isCustomElement?: (tag: string) => boolean
    whitespace?: 'condense' | 'preserve' // default: 'condense'
    delimiters?: [string, string] // default: ['{{', '}}']
    comments?: boolean // default: false
  }
}

詳情
此配置選項僅在完全構建（即可以編譯瀏覽器中模板的獨立 vue.js）時受尊重。它支援與應用級別的 app.config.compilerOptions 相同的選項，並且對當前元件具有更高的優先順序。
參閱 app.config.compilerOptions

slots

僅支援在3.3及以上版本

一個選項，用於在渲染函式中以程式設計方式使用slots時輔助型別推斷。

詳情

此選項的執行時值不被使用。實際型別應透過使用 SlotsType 型別輔助函式進行型別轉換來宣告。

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
    )
  }
})

在GitHub上編輯此頁面

選項：渲染 ​

template ​

render ​

compilerOptions ​

slots ​

選項：渲染

template

render

compilerOptions

slots