Seperti kita ketahui, pada program sebelumnya kita meletakkan nilai secara langsung seperti ini,

lalu apa yang terjadi jika kita memberi nilai lain pada tag <tebal>, kita? Seperti misalnya
berikut ini:

 

Saat kita menjalankan di browser, termyata hasilnya akan muncul teksnya tetap berisi Teks bold dari Fitur Andalan Vue Js Yaitu Component. Lalu bagaimana cara mengubahnya menjadi Hello World?
Itulah yang terjadi kalau kita memasukkan script secara hardcore pada template. Terus gimana cara mengubahnya?
Vue Js menyediakan solusinya dengan menggunakan sebuah tag bernama “slot” yang merupakan fasilitas unik dari Vue Js yang digunakan sebagai content distribution dengan memodelkan tag <slot> menjadi draft atas Component didalamnya.
Teman-teman bingung? Biar lebih mudah saya simpulkan, dengan adanya <slot> kita dapat mengisi Component dengan nilai didalamnya.
Yuk simak script dibawah, kita ubah script Vue Js dari program yang sudah kita buat sebelumnya. Menjadi seperti dibawah ini:

Dan pada file index.htmlnya seperti dibawah ini:

 

Dan hasilnya pada browser teksnya yang tampil itu Hello World. Semoga bermanfaat!