Vue.js

# Удалён атрибут inline-template
кардинальное изменение

# Обзор

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

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

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

<my-component inline-template>
  <div>
    <p>Это компилируется как собственный шаблон компонента.</p>
    <p>Нельзя использовать содержимое из родительской области видимости.</p>
  </div>
</my-component>
1
2
3
4
5
6

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

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

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

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

Флаг сборки для миграции: COMPILER_INLINE_TEMPLATE

# Опция #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, слоты могут быть отрисованы как корневые элементы с помощью поддержки фрагментов!

← Изменения использования атрибута key →