Опції: Рендеринг
template
Рядок шаблону для компонента.
Тип
tsinterface ComponentOptions { template?: string }
Подробиці
Шаблон, наданий за допомогою параметра
template
, буде скомпільовано на льоту під час виконання. Він підтримується лише під час використання збірки Vue, яка включає компілятор шаблонів. Компілятор шаблону НЕ включено до збірок Vue, у назвах яких є слово «runtime», напр.vue.runtime.esm-bundler.js
. Зверніться до гіда файлів комплекту, щоб дізнатися більше про різні збірки.Якщо рядок починається з
#
, він використовуватиметься якquerySelector
і використовуватимеinnerHTML
вибраного елемента як рядок шаблону. Це дозволяє створювати вихідний шаблон за допомогою власних елементів<template>
.Якщо параметр
render
також присутній у тому самому компоненті,template
ігноруватиметься.Якщо в кореневому компоненті вашого застосунку не вказано параметри
template
абоrender
, Vue замість цього спробує використатиinnerHTML
змонтованого елемента як шаблон.Примітка безпеки
Використовуйте лише джерела шаблонів, яким можна довіряти. Не використовуйте вміст, наданий користувачами, як шаблон. Додаткову інформацію див. у Гіді безпеки.
render
Функція, яка програмно повертає віртуальне дерево DOM компонента.
Тип
tsinterface 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
Налаштування параметрів компілятора під час виконання для шаблону компонента.
Тип
tsinterface ComponentOptions { compilerOptions?: { isCustomElement?: (tag: string) => boolean whitespace?: 'condense' | 'preserve' // за промовчанням: 'condense' delimiters?: [string, string] // за промовчанням: ['{{', '}}'] comments?: boolean // за промовчанням: false } }
Подробиці
Цей параметр конфігурації застосовується лише під час використання повної збірки (тобто окремого vue.js
, який може компілювати шаблони у браузері). Він підтримує ті самі параметри, що й app.config.compilerOptions рівня застосунку, і має вищий пріоритет для поточного компонента.
- Дивіться також: app.config.compilerOptions
slots
Опція для допомоги у визначенні типу під час програмного використання слотів у функціях рендерингу. Підтримується лише в 3.3+.
- Подробиці
Значення під час виконання цього параметра не використовується. Фактичні типи мають бути оголошені за допомогою приведення типу за допомогою помічника типу SlotsType
:
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)
}
})