オプション: レンダリング

template

コンポーネントの文字列テンプレート。

型

interface ComponentOptions {
  template?: string
}

詳細
template オプションで提供されたテンプレートは、実行時にオンザフライでコンパイルされます。これは、テンプレートコンパイラーを含んでいる Vue のビルドを使用する場合にのみサポートされます。vue.runtime.esm-bundler.js など、名前に runtime が入っている Vue のビルドにはテンプレートコンパイラーは含まれていません。各ビルドの詳細については、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 以上でのみサポートされています

レンダー関数でプログラム的にスロットを使用する際に、型推論を支援するオプションです。

詳細

このオプションの実行時の値は使用されません。実際の型は 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