Vue.js

# Atributo Inline Template
breaking

# Visão Geral

O suporte ao recurso inline-template (opens new window) foi removido.

# Sintaxe v2.x

Na versão 2.x, o Vue disponibilizava o atributo inline-template em componentes filhos para usar seu conteúdo interno como template ao invés de o tratar como conteúdo distribuído.

<my-component inline-template>
  <div>
    <p>Estes são compilados como template do próprio componente.</p>
    <p>Não como conteúdo da transclusão do componente pai.</p>
  </div>
</my-component>
1
2
3
4
5
6

# Sintaxe v3.x

Esta funcionalidade não receberá mais suporte.

# Estratégia de Migração

A maioria dos casos de uso de inline-template assume um ambiente sem ferramentas de compilação, onde todos os templates são escritos diretamente dentro da página HTML.

Sinalizador na compilação de migração: COMPILER_INLINE_TEMPLATE

# Opção #1: Utilize a tag <script>

A solução mais simples nestes casos é utilizar a tag <script> com um tipo alternativo:

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

E no componente, aponte para o template utilizando um seletor:

const MyComp = {
  template: '#my-comp-template'
  // ...
}
1
2
3
4

Isto não requer nenhuma configuração de compilação, funciona em todos os navegadores, não está sujeito a quaisquer limitações da análise de HTML no-DOM (ex.: você pode usar nomes de propriedades em camelCase) e fornece destaque de sintaxe na maioria das IDEs. Em frameworks tradicionais que trabalham no lado do servidor, estes templates podem ser divididos em partes de templates do servidor (incluídas no template HTML principal) para uma melhor manutenção.

# Opção #2: Slot Default

Um componente que anteriormente utilizava inline-template também pode ser refatorado utilizando o slot default - o que torna a definição do escopo de dados mais explícita enquanto preserva a conveniência de escrever o conteúdo filho inline:

<!-- Sintaxe v2.x -->
<my-comp inline-template :msg="parentMsg">
  {{ msg }} {{ childState }}
</my-comp>

<!-- Versão com Slot Default -->
<my-comp v-slot="{ childState }">
  {{ parentMsg }} {{ childState }}
</my-comp>
1
2
3
4
5
6
7
8
9

O componente filho, ao invés de não fornecer nenhum template, agora deve renderizar o slot default*:

<!--
  no template filho, renderiza o slot default enquanto passa
  o estado privado necessário do filho.
-->
<template>
  <slot :childState="childState" />
</template>
1
2
3
4
5
6
7
  • Nota: na versão 3.x, slots podem ser renderizados como raiz com suporte nativo a fragmentos!

← Atributo key →