Interoperabilidade dos Elementos Personalizados

rutura

Visão Geral

• RUTURA: As verificações para determinar se os marcadores devem ser tratados como elementos personalizados são agora realizadas durante a compilação do modelo de marcação, e deve ser configurada através das opções do compilador ao invés da configuração do tempo de execução.
• RUTURA: O uso do atributo is especial está restrito apenas ao marcador <component> reservado.
• NOVO: Para suportar os casos de uso da 2.x onde is era usado sobre os elementos nativos para dar a volta as restrições de analise do HTML nativo, prefixamos o valor com vue: para resolvê-lo como um componente de Vue.

Elementos Personalizados Autónomos

Se quisermos adicionar um elemento personalizado definido fora da Vue (por exemplo, usando a API de Componentes da Web), precisamos de 'instruir' a Vue à tratá-lo como um elemento personalizado. Vamos usar o seguinte modelo de marcação como um exemplo:

<plastic-button></plastic-button>

Sintaxe da 2.x

Na Vue 2.x, a configuração dos marcadores como elementos personalizado era feita através da Vue.config.ignoredElements:

// Isto fará a Vue ignorar elemento personalizado definido fora da Vue
// (por exemplo, usando as APIs de Componentes da Web)

Vue.config.ignoredElements = ['plastic-button']

Sintaxe da 3.x

Na Vue 3.0, esta verificação é realizada durante a compilação do modelo de marcação. Para instruir o compilador à tratar <plastic-button> como um elemento personalizado:

• Se estivermos a usar uma etapa de construção: passamos a opção isCustomElement ao compilador do modelo de marcação da Vue. Se estivermos a usar o vue-loader, esta deve ser passada através da opção compilerOptions da vue-loader:

  // na configuração da webpack
  rules: [
    {
      test: /\.vue$/,
      use: 'vue-loader',
      options: {
        compilerOptions: {
          isCustomElement: tag => tag === 'plastic-button'
        }
      }
    }
    // ...
  ]

• Se estivermos a usar a compilação de modelo de marcação em tempo real, passamos-o através app.config.compilerOptions.isCustomElement:

  const app = Vue.createApp({})
  app.config.compilerOptions.isCustomElement = tag => tag === 'plastic-button'

  É importante notar que a configuração da execução apenas afeta a compilação de modelo de marcação da execução - não afetará os modelos de marcação pré-compilados.

Elementos Embutidos Personalizados

A especificação dos Elementos Personalizados fornece uma maneira de usar os elementos personalizados como Elemento Embutido Personalizado adicionado o atributo is à um elemento embutido:

<button is="plastic-button">Click Me!</button>

O uso da Vue do atributo especial is era simular o que o atributo nativo faz antes que fosse tornado universalmente disponível nos navegadores. No entanto, na 2.X era interpretado como desenhar um componente de Vue com o nome plastic-button. Isto bloqueia o uso nativo do Elemento Embutido Personalizado mencionado acima.

Na 3.0, estamos limitando o tratamento especial da Vue do atributo is apenas ao marcador <component>:

• Quando usado no marcador <component> reservado, comportar-se-á exatamente como na 2.x;

• Quando usado sobre os componentes normais, comportar-se-á tal como um atributo normal:

  <foo is="bar" />

  • Comportamento da 2.x: desenha o componente bar.
  • Comportamento da 3.x: desenha o componente foo e passando o atributo is.

• Quando usado sobre os elementos simples, será passado à chamada de createElement como o atributo is, e também será desenhado como um atributo nativo. Isto suporta o uso dos elementos embutidos personalizados:

  <button is="plastic-button">Click Me!</button>

  • Comportamento da 2.x: desenha o componente plastic-button.

  • Comportamento da 3.x: desenha um botão nativo chamado:

    document.createElement('button', { is: 'plastic-button' })

Opção da Construção de Migração: COMPILER_IS_ON_ELEMENT

Prefixo vue: para Solucionar a Analise do Modelo de Marcação no DOM

Nota: esta seção apenas afeta casos onde os modelos de marcação da Vue são diretamente escritos no HTML da página. Quando usamos os modelos de marcação no DOM, o modelo de marcação está sujeito às regras de analise de HTML nativa. Alguns elementos de HTML, tal como <ul>, <ol>, <table> e <select> têm restrições sobre quais elementos podem aparecer dentro deles, e alguns elementos tais como <li>, <tr>, e <option> apenas podem aparecer dentro de outros certos elementos.

Sintaxe da 2.x

Na Vue 2, recomendados dar a volta a estas restrições usando o atributo is sobre um marcador nativo:

<table>
  <tr is="blog-post-row"></tr>
</table>

Sintaxe da 3.x

Com a mudança de comportamento do is, um prefixo vue: agora é necessário para resolver o elemento como um componente de Vue:

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

Estratégia de Migração

• Substituir config.ignoredElements ou com a compilerOptions da vue-loader (com a etapa de construção) ou com a app.config.compilerOptions.isCustomElement (com a compilação do modelo de marcação em tempo real).

• Mudar todos os marcadores que são <component> com o uso do is para <component is="..."> (para os modelos de marcação do componente de ficheiro único) ou o prefixar com vue: (para os modelos de marcação no DOM).

Consulte também

• Guia - Vue e os Componentes da Web