آپشن: رندر کردن ​

تمپلیت ​

یک تمپلیت رشته‌ای برای کامپوننت.

• تایپ

  ts

  interface 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 مجازی کامپوننت را بازمیگرداند.

• تایپ

  ts

  interface 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 اولویت بالاتری خواهد داشت.

• همچنان دیدن کنید از

  • مکانیسم رندرینگ
  • توابع رندر

گزینه های کامپایلر ​

پیکربندی گزینه‌های کامپایلر در زمان اجرا برای تمپلیت کامپوننت

• تایپ

  ts

  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

اسلات‌ها ​

• فقط در 3.3+ پشتیبانی می شود

یک آپشن برای کمک به استخراج type inference هنگام استفاده برنامه‌نویسی از اسلات‌ها در توابع رندر.

• جزئیات

  مقدار ران‌تایم این آپشن استفاده نمی‌شود. تایپ‌های واقعی باید از طریق تعیین تایپ با استفاده از کمک‌کننده تایپ 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
      )
    }
  })