Options API: Vykreslování
šablona
Šablona pro komponentu ve formě textového řetězce.
Typ
tsinterface ComponentOptions { template?: string }
Podrobnosti
Šablona poskytnutá pomocí vlastnosti
template
bude kompilována na požádání (on-the-fly) za běhu. Tato volba je podporována pouze při použití takového Vue buildu, který zahrnuje kompilátor šablon. Kompilátor šablon NENÍ zahrnut ve Vue buildech, které mají ve svém názvu slovoruntime
, např.vue.runtime.esm-bundler.js
. Pro více informací o různých variantách se podívejte do průvodce distribučními soubory.Pokud řetězec začíná znakem
#
, bude použit jakoquerySelector
a jako řetězec šablony se použijeinnerHTML
vybraného prvku. To umožňuje vytvářet zdrojovou šablonu pomocí nativních prvků<template>
.Pokud je ve stejné komponentě přítomna i vlastnost
render
, budetemplate
ignorováno.Pokud root komponenta vaší aplikace nemá specifikováno
template
anirender
, Vue se místo toho pokusí použít jako šablonuinnerHTML
připojeného prvku.Bezpečnostní poznámka
Používejte pouze zdroje šablon, kterým důvěřujete. Nepoužívejte jako šablonu obsah poskytovaný uživatelem. Pro více informací se podívejte do průvodce bezpečností.
render
Funkce, která programově vrací virtuální DOM strom komponenty.
Typ
tsinterface ComponentOptions { render?(this: ComponentPublicInstance) => VNodeChild } type VNodeChild = VNodeChildAtom | VNodeArrayChildren type VNodeChildAtom = | VNode | string | number | boolean | null | undefined | void type VNodeArrayChildren = (VNodeArrayChildren | VNodeChildAtom)[]
Podrobnosti
render
je alternativou ke string templates, která vám pro deklaraci výstupu vykreslení komponenty umožňuje využít plnou programovou sílu JavaScriptu.Předkompilované šablony, například ty ve Single-File komponentách (SFC), jsou při buildu zkompilovány do možnosti
render
. Pokud jsou v komponentě přítomny jakrender
, taktemplate
,render
má vyšší prioritu.Viz také:
compilerOptions
Nastavuje možnosti runtime kompilátoru pro šablonu komponenty.
Typ
tsinterface ComponentOptions { compilerOptions?: { isCustomElement?: (tag: string) => boolean whitespace?: 'condense' | 'preserve' // výchozí: 'condense' delimiters?: [string, string] // výchozí: ['{{', '}}'] comments?: boolean // výchozí: false } }
Detaily
Tato konfigurační vlastnost je respektována pouze při použití plného (full) buildu (tj. samostatného
vue.js
, který může kompilovat šablony v prohlížeči). Podporuje stejné parametry jako app.config.compilerOptions na úrovni aplikace a má pro aktuální komponentu vyšší prioritu.Viz také: app.config.compilerOptions
slots
Možnost pomoci s odvozením typů při programovém použití slotů ve funkcích pro vykreslení. Podporováno pouze ve verzi 3.3+.
Detaily
Runtime hodnota této vlastnosti se nepoužívá. Skutečné typy by měly být deklarovány přes přetypování prostřednictvím pomocného typu
SlotsType
:tsimport { 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) } })