选项：渲染

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