Опции: Отрисовка ​

template ​

Строка шаблона для компонента.

• Тип

  ts

  interface ComponentOptions {
    template?: string
  }

• Подробности

  Шаблон, предоставленный с помощью опции template, будет скомпилирован "на лету" во время выполнения. Это поддерживается только при использовании сборки Vue, включающей компилятор шаблонов. Компилятор шаблонов НЕ включен в сборки Vue, в названии которых присутствует слово runtime, например, vue.runtime.esm-bundler.js. Более подробную информацию о различных сборках можно найти в руководство по выбору файла сборки.

  Если строка начинается с #, то она будет использована в качестве querySelector и в качестве строки шаблона будет использоваться innerHTML выбранного элемента. Это позволяет создавать исходный шаблон с использованием нативных элементов <template>.

  Если в том же компоненте присутствует опция render, то template будет проигнорирован.

  Если в корневом компоненте приложения не указана опция template или render, Vue попытается использовать innerHTML смонтированного элемента в качестве шаблона.

  Примечание о безопасности

  Используйте только те источники шаблонов, которым можно доверять. Не используйте в качестве шаблона содержимое, предоставленное пользователем. Подробнее об этом см. в Руководстве по безопасности.

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 - это альтернатива строковым шаблонам, позволяющая использовать всю программную мощь JavaScript для объявления вывода компонента на экран.

  Предварительно скомпилированные шаблоны, например, в однофайловых компонентах, компилируются в опцию render во время сборки. Если в компоненте присутствуют и render, и template, то render будет иметь больший приоритет.

• См. также

  • Механизм отрисовки
  • Render-функции

compilerOptions ​

Настройка параметров runtime компилятора для шаблона компонента.

• Тип

  ts

  interface 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
      )
    }
  })