# Удалён атрибут `inline-template`
breaking

# Обзор

Поддержка возможности инлайновых шаблонов (opens new window) была удалена.

# Синтаксис в 2.x

В версии 2.x, можно было указывать атрибут inline-template на дочерних компонентах, чтобы использовать их внутреннее содержимое в качестве шаблона, вместо того, чтобы рассматривать его как предоставляемое содержимое.

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

1
2
3
4
5
6

# Синтаксис в 3.x

Эта возможность больше не поддерживается.

# Стратегия миграции

Большинство случаев использования inline-template предполагает отсутствие шага сборки, когда все шаблоны записываются непосредственно внутри HTML-страницы.

# Опция #1: Использовать тег `<script>`

Самый простой путь в этих случаях — использовать тег <script> с альтернативным типом:

<script type="text/html" id="my-comp-template">
  <div>{{ hello }}</div>
</script>

1
2
3

И в компоненте указать шаблон с помощью селектора:

const MyComp = {
  template: '#my-comp-template'
  // ...
}

1
2
3
4

Для этого не требуется настраивать сборку, работает во всех браузерах, не подвергается никаким ограничениям по обработке HTML в DOM (например, можно использовать имена входных параметров в camelCase), а также обеспечивает корректную подсветку синтаксиса в большинстве IDE. В традиционных server-side фреймворках такие шаблоны могут быть разделены на серверные части шаблона (включённые в основной шаблон HTML) для удобства в поддержке.

# Опция #2: Слот по умолчанию

Компонент, ранее использовавший inline-template, также может быть переработан на использование слота по умолчанию — что делает более явной передачу данных, сохраняя при этом удобство записи инлайн-содержимого:

<!-- Синтаксис в 2.x -->
<my-comp inline-template :msg="parentMsg">
  {{ msg }} {{ childState }}
</my-comp>

<!-- Версия со слотом по умолчанию -->
<my-comp v-slot="{ childState }">
  {{ parentMsg }} {{ childState }}
</my-comp>

1
2
3
4
5
6
7
8
9

Дочерний элемент, вместо пустого шаблона, должен отображать слот по умолчанию*:

<!--
  в дочернем шаблоне, отрисовать слот по умолчанию
  и передать необходимое приватного состояния потомку.
-->
<template>
  <slot :childState="childState" />
</template>

1
2
3
4
5
6
7

Примечание: С версии 3.x, слоты могут быть отрисованы как корневые элементы с помощью поддержки фрагментов!

← Поддержка tree-shaking для глобального API Изменения использования атрибута key →

# Удалён атрибут inline-template breaking