آپشن: رندر کردن
تمپلیت
یک تمپلیت رشتهای برای کامپوننت.
تایپ
tsinterface ComponentOptions { template?: string }
جزئیات
تمپلیتی که از طریق آپشن
template
ارائه میشود، در زمان اجرا کامپایل خواهد شد. این تنها در صورتی پشتیبانی میشود که از یک بیلد Vue که شامل کامپایلرِ تمپلیت است استفاده شود. کامپایلرِ تمپلیت شامل بیلدهایی از Vue که در نام خود کلمهruntime
را دارند نمیشود، برای مثالvue.runtime.esm-bundler.js
. برای جزئیات بیشتر در مورد بیلدهای مختلف، راهنمای فایل dist را مطالعه کنید.اگر رشته با
#
شروع شود به عنوان یکquerySelector
استفاده میشود و ازinnerHTML
المان انتخاب شده به عنوان رشتهی تمپلیت استفاده خواهد شد. این امکان را فراهم میکند که تمپلیت منبع با استفاده از المانهای<template>
اصلی نوشته شود.اگر آپشن
render
هم در همان کامپوننت موجود باشد، آپشنtemplate
نادیده گرفته خواهد شد.اگر کامپوننت ریشه برنامه شما آپشنهای
template
یاrender
را مشخص نکرده باشد، Vue سعی میکند ازinnerHTML
المان mount شده به عنوان تمپلیت استفاده کند.
نکته امنیتی
فقط از منابع تمپلیتی استفاده کنید که به آنها اعتماد دارید. هرگز محتوای ارائه شده توسط کاربران دیگر را به عنوان تمپلیت خود استفاده نکنید. برای کسب اطلاعات بیشتر به راهنمای امنیتی مراجعه کنید.
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
یک جایگزین برای تمپلیتهای رشتهای است که به شما این امکان میدهد از قدرت برنامهنویسی کامل جاوا اسکریپت برای تعریف خروجی رندر کامپوننت استفاده کنید.تمپلیتهای پیش کامپایل شده، به عنوان مثال تمپلیتهای موجود در کامپوننتهای تک فایلی، در زمان بیلد به آپشن
render
تبدیل میشوند. اگر هر دو آپشنrender
وtemplate
همزمان در یک کامپوننت وجود داشته باشند، آپشنrender
اولویت بالاتری خواهد داشت.همچنان دیدن کنید از
گزینه های کامپایلر
پیکربندی گزینههای کامپایلر در زمان اجرا برای تمپلیت کامپوننت
تایپ
tsinterface 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
اسلاتها
- فقط در 3.3+ پشتیبانی می شود
یک آپشن برای کمک به استخراج type inference هنگام استفاده برنامهنویسی از اسلاتها در توابع رندر.
جزئیات
مقدار رانتایم این آپشن استفاده نمیشود. تایپهای واقعی باید از طریق تعیین تایپ با استفاده از کمککننده تایپ
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 ) } })