# Atribut Templat Inline
breaking

# Gambaran Umum

Dukungan untuk fitur inline-template (opens new window) telah dihapuskan.

# 2.x Sintaksis

Di 2.x, Vue menyediakan atribut inline-template pada komponen anak/turunan. Komponen turunan ini menggunakan konten didalamnya sebagai templat komponen daripada memperlakukannya sebagai konten terdistribusi.

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>
1
2
3
4
5
6

# 3.x Sintaksis

Fitur ini tidak lagi didukung

# Strategi dalam Migrasi

Banyak penggunaan inline-template diasumsikan menggunakan sebuah no-build-tool, dimana semua templat ditulis langsung ke dalam halaman HTML.

Migration build flag: COMPILER_INLINE_TEMPLATE

# Pilihan #1: menggunakan tag <script>

Cara paling mudah adalah dalam kasus ini adalah menggunakan <script> dengan tipe alternatif:

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

Dan dalam komponen, target templat tersebut menggunakan sebuah selector:

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

Opsi ini tidak memerlukan suatu build setup, bekerja di semua peramban, bukan subjek dari suatu in-DOM HTML parsing caveats (contoh Anda dapat menggunakan camelCase pada penamaan prop), dan memberikan sorotan sintaksis yang benar pada kebanyakan IDEs. Pada kerangka kerja sisi-peladen tradisional, template ini dapat dipisah menjadi partisi templat peladen (termasuk templat HTML utama) agar mempermudah dalam pemeliharaan.

# Pilihan #2: Default Slot

Komponen yang sebelumnya menggunakan inline-template juga dapat direfaktor menggunakan default slot - Yang mana membuat jangkauan data menjadi lebih jelas sementara menjaga kemudahanan dalam menulis konten anak secara inline:

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

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

Anak tersebut, daripada menyediakan templat kosong, sekarang seharusnya menampilkan default slot*:

<!--
  in child template, render default slot while passing
  in necessary private state of child.
-->
<template>
  <slot :childState="childState" />
</template>
1
2
3
4
5
6
7
  • Catatan: di 3.x, slots juga dapat ditampilkan sebagai root bersamaan dengan dukungan native fragments!

Deployed on Netlify.
Pembaruan terakhir: 2021-08-22, 06:35:18 UTC