Membuat Component di Vuejs

Component ini merupakan salah satu fitur penting dalam Framework Vue js. Fitur ini mengijinkan programmer untuk memperluaskan elemen HTMLnya dengan membungkus dalam satu kode artinya component ini adalah sistem templating dimana kita membuat satu template tertentu untuk digunakan berkali kali. Berikut merupakan cara penggunaan component.

1. Component dengan 1 Slot

<div class="custom-class">
	<p>
		<slot/>
	</p>
</div>

Dan cara penggunaannya adalah seperti berikut

<div id="app">
	<custom-paragraph>
		Tulisan ini akan dirender menggunakan custom paragraph
	</custom-paragraph>
</div>

2. Menggunakan Beberapa Slot

<div class="custom-card">
	<h2>
		<slot name="header"></slot>
	</h2>
	<p>
		<slot name="content"></slot>
	</p>
</div>

Dan cara pemanggilannya

<div id="app">
	<card>
		<span slot="header">Header card</span>
		<span slot="content">Isi card</span>
	</card>
</div>