Зміни у взаємодії користувацьких елементів

несумісно

#

Огляд #

• НЕСУМІСНО: Перевірка того, чи слід розглядати теги як користувацькі елементи, тепер виконується під час компіляції шаблону, і її слід налаштовувати за допомогою опцій компілятора, а не конфігурації під час виконання в реальному часі.
• НЕСУМІСНО: Використання спеціального атрибута is обмежено лише зарезервованим тегом <component>.
• НОВЕ: Для підтримки випадків використання версії 2.x, коли is використовується на нативних елементах для обходу обмежень нативного парсингу HTML, додайте до значення префікс vue:, щоб відобразити його як компонент Vue.

Автономні користувацькі елементи #

Якщо ми хочемо додати користувацький елемент, визначений за межами Vue (наприклад, за допомогою API веб-компонентів), нам потрібно "вказати" Vue розглядати його як користувацький елемент. Давайте розглянемо для прикладу наступний шаблон.

<plastic-button></plastic-button>

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

У версії Vue 2.x налаштування тегів як користувацьких елементів здійснювалося за допомогою Vue.config.ignoredElements:

// Це змусить Vue ігнорувати користувацький елемент, визначений за межами Vue
// (наприклад, за допомогою API веб-компонентів)

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

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

У версії Vue 3.0 ця перевірка виконується під час компіляції шаблону. Вказати компілятору вважати <plastic-button> користувацьким елементом:

• Передайте опцію isCustomElement компілятору шаблону Vue на етапі збірки. Якщо ви використовуєте vue-loader, це має бути передано через опцію compilerOptions у vue-loader:

  js

  // у конфігурації webpack
  rules: [
    {
      test: /\.vue$/,
      use: 'vue-loader',
      options: {
        compilerOptions: {
          isCustomElement: tag => tag === 'plastic-button'
        }
      }
    }
    // ...
  ]
  

• Якщо ви використовуєте компіляцію шаблону на льоту, передайте його через app.config.compilerOptions.isCustomElement:

  js

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

  Важливо зазначити, що конфігурація часу виконання впливає лише на компіляцію шаблонів під час виконання - вона не впливає на попередньо скомпільовані шаблони.

Індивідуальні вбудовані елементи #

Специфікація користувацьких елементів надає можливість використовувати користувацькі елементи як Користувацькі вбудовані елементи, додавши атрибут is до вбудованого елемента:

<button is="plastic-button">Натисни мене!</button>

Використання спеціального атрибута is у Vue імітувало те, що робить рідний атрибут до того, як він став загальнодоступним у браузерах. Однак у версії 2.x його було сприйнято як рендеринг компонента Vue з назвою plastic-button. Це блокує використання вбудованого користувацького елемента, згаданого вище.

У версії 3.0 ми обмежуємо спеціальне поводження Vue з атрибутом is лише з тегом <component>.

• При використанні у зарезервованому тегу <component> він поводитиметься так само як і у версії 2.x;

• При використанні зі звичайними компонентами він поводитиметься як звичайний атрибут:

  html

  <foo is="bar" />
  

  • Поведінка 2.x: рендерить компонент bar.
  • Поведінка 3.x: рендерить компонент foo і передає атрибут is.

• При використанні на простих елементах він буде переданий до виклику createElement як атрибут is, а також відрендерений як власний атрибут. Це підтримує використання користувацьких вбудованих елементів.

  html

  <button is="plastic-button">Натисни мене!</button>
  

  • Поведінка 2.x: рендерить компонент plastic-button.

  • Поведінка 3.x: рендерить нативну кнопку за викликом

    js

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

Стяг збірки міграції: COMPILER_IS_ON_ELEMENT

vue: Префікс для обхідних шляхів парсингу шаблонів In-DOM #

Примітка: цей розділ стосується лише тих випадків, коли шаблони Vue безпосередньо вписані в HTML сторінки. Деякі елементи HTML, такі як <ul>, <ol>, <table> та <select>, мають обмеження на те, які елементи можуть з’являтися всередині них, а деякі елементи, такі як <li>, <tr> та <option>, можуть лише з'являються всередині певних елементів.

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

У версії Vue 2 ми рекомендували обходити ці обмеження, використовуючи атрибут is у нативному тегу:

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

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

Зі зміною поведінки is тепер потрібен префікс vue:, щоб розпізнати елемент як компонент Vue:

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

Стратегія міграції #

• Замініть config.ignoredElements на compilerOptions у vue-loader (на етапі збірки) або app.config.compilerOptions.isCustomElement (з компіляцією шаблону на льоту)

• Змініть усі не-теги <component> з використанням is на <component is="..."> (для шаблонів SFC) або додайте до них префікс vue: (для шаблонів in-DOM).

Дивіться також #

• Гід - Vue та веб-компоненти