Interoperabilitas Elemen Kustom

breaking

Gambaran Umum

• MERUSAK: Whitelisting pada elemen kustom sekarang dijalankan pada saat kompilasi template, dan harus disetel melalui pengaturan kompilator, bukan melalui pengaturan waktu eksekusi.
• MERUSAK Penggunaan properti khusus is dibatasi untuk tag <component> saja.
• BARU Terdapat directive baru v-is untuk mendukung kasus penggunaan pada Vue versi 2.x dimana is digunakan pada elemen bawaan untuk mengatasi masalah batasan penguraian pada elemen bawaan HTML.

Elemen Kustom Otonom

Apabila Anda ingin menambahkan sebuah elemen kustom yang didefiniskan di luar Vue (contoh: menggunakan API Web Components), Anda harus mengatur Vue supaya menganggap komponen tersebut sebagai sebuah elemen kustom. Template berikut akan digunakan sebagai contoh untuk penjelasan selanjutnya.

<tombol-plastik></tombol-plastik>

Sintaks Vue versi 2.x

Pada Vue versi 2.x, whitelisting tag sebagai elemen kustom dilakukan melalui Vue.config.ignoredElemets:

// Kode di bawah akan membuat Vue menghiraukan elemen kustom yang
// didefiniskan diluar Vue (contoh: menggunakan API Web Components)

Vue.config.ignoredElements = ['tombol-plastik']

Sintaks Vue versi 3.x

Pada Vue versi 3.0, pemeriksaan elemen kustom akan dilakukan pada saat kompilasi template. Untuk mengatur supaya kompilator menganggap <tombol-plastik> sebagai elemen kustom:

• Apabila terdapat sebuah proses pembangunan kode program: teruskan opsi isCustomElement pada kompilator template Vue. Apabila Anda menggunakan vue-loader, opsi tersebut harus diteruskan melalui opsi compilerOptions pada vue-loader:

  // pada konfigurasi Webpack
  rules: [
    {
      test: /\.vue$/,
      use: 'vue-loader',
      options: {
        compilerOptions: {
          isCustomElement: tag => tag === 'tombol-plastik'
        }
      }
    }
    // ...
  ]
  

• Apabila Anda menggunakan kompilasi template secara on-the-fly, teruskan opsi melalui app.config.isCustomElement:

  const app = Vue.createApp({})
  app.config.isCustomElement = tag => tag === 'tombol-plastik'
  

  Perlu diingat bahwa konfigurasi waktu eksekusi hanya mempengaruhi kompilasi template pada waktu eksekusi - konfigurasi tersebut tidak akan mempengaruhi template yang sudah dikompilasi sebelumnya.

Elemen Bawaan yang Dikustomisasi

Spesifikasi elemen kustom menyediakan sebuah cara untuk menggunakan elemen kustom sebagai Elemen Bawaan yang Dikustomisasi (opens new window) dengan menambahkan atribut is pada pada sebuah elemen bawaan:

<button is="tombol-plastik">Tekan Aku!</button>

Penggunaan properti khusus is oleh Vue adalah mensimulasikan fungsi atribut bawaan sebelum fungsi tersebut tersedia secara global pada perambah. Namun, pada Vue versi 2.x properti tersebut akan dianggap sebagai sebuah komponen Vue dengan nama tombol-plastik. Perilaku tersebut mencegah fungsi bawaan pada Elemen Bawaan yang Dikustomisasi.

Pada Vue versi 3.0, kami membatasi perlakukan khusus Vue pada properti is hanya untuk tag <component> saja.

• Ketika digunakan pada tag <component>, properti tersebut akan memiliki perilaku yang sama dengan pada Vue versi 2.x;

• Ketika digunakan pada komponen biasa, properti tersebut akan dianggap sebagai sebuah properti biasa:

  <foo is="bar" />
  

  • Perilaku pada Vue versi 2.x: menampilkan komponen bar.
  • Perilaku pada Vue versi 3.x: menampilkan komponen foo dan meneruskan properti is.

• Ketika digunakan pada elemen biasa, properti tersebut akan diteruskan pada pemanggilan fungsi createElement sebagai opsi is, dan juga ditampilkan sebagai atribut bawaan. Hal tersebut mendukung penggunaan dari elemen bawaan yang dikustomisasi.

  <button is="tombol-plastik">Tekan Aku!</button>
  

  • Perilaku pada Vue versi 2.x: menampilkan komponen tombol-plastik.

  • Perilaku pada Vue versi 3.x: menampilkan komponen tombol bawaan dengan memanggil fungsi

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

v-is Untuk Menangani Penguraian Template Dalam DOM

Catatan: bagian ini hanya mempengaruhi kasus-kasus di mana template Vue ditulis secara langsung pada HTML dari halaman web. Ketika menggunakan template dalam DOM, template tersebut akan diuraikan menggunakan aturan penguraian HTML bawaan. Beberapa eleme HTML, seperti <ul>, <ol>, <table>, dan <select> memiliki batasan-batasan mengenai elemen yang dapat ditampilkan di dalam elemen tersebut, dan beberapa elemen seperti <li>, <tr>, dan <option> hanya bisa tampil di dalam elemen lain tertentu.

Sintaks Vue versi 2.x

Pada Vue versi 2, kami menyarankan untuk mengatasi batasan-batasan tersebut dengan menggunakan properti is pada sebuah tag HTML bawaan:

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

Sintaks Vue versi 3.x

Dengan perubahan perilaki dari is, kami memperkenalkan sebuah directive baru v-is untuk menangani kasus tersebut:

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

WARNING

Fungsi v-is mengharapkan sebuah ikatan dinamis :is seperti pada Vue versi 2.x - sehingga untuk menampilkan sebuah komponen berdasarkan nama yang sudah didaftarkan, nilai dari v-is harus merupakan sebuah string literal JavaScript:

<!-- Salah, tidak ada yang akan ditampilkan -->
<tr v-is="blog-post-row"></tr>

<!-- Benar -->
<tr v-is="'blog-post-row'"></tr>

Strategi Migrasi

• Ganti config.ignoredElements dengan compilerOptions milik vue-loader (dengan langkah pembangunan kode program) atau app.config.isCustomElement (dengan kompilasi template secara on-the-fly).
• Ganti seluruh penggunaan is pada tag yang bukan <component> dengan <component is="..."> (untuk template SFC) atau v-is (untuk template dalam DOM).