Apa Perbedaan antara Slots dan Scoped Slots di VueJS?

Perbedaan antara Slots dan Scoped Slots di VueJS

Saat membangun aplikasi atau proyek di Vue, kita perlu mengubah atau mengirimkan konten atau data antara komponen induk (dasar) dan anak agar pengguna dapat membangun Antarmuka Pengguna yang dapat digunakan kembali. Seperti di ReactJS, ada konsep props yang memungkinkan kita mengirim data antar komponen. Di Vue, kita dapat melakukan fungsionalitas yang sama dengan slots dan scoped slots. Artikel ini akan membahas slots dan scoped slots beserta sintaks dan contohnya, serta perbedaan utama antara keduanya berdasarkan beberapa parameter penting dan unik.

Slots VueJS

Di Vue, slots adalah istilah penting yang membantu kita mengirim konten atau data dari komponen induk atau dasar ke komponen anak dengan cara yang lebih andal. Slots memungkinkan kita mendefinisikan placeholder dalam template komponen anak tempat kita benar-benar menempatkan konten dari induk. Slots terutama digunakan untuk mengembangkan komponen yang dapat digunakan kembali yang dapat memiliki data atau konten berbeda tanpa perlu memodifikasi struktur aplikasi.

Sintaks Slots

Berikut adalah sintaks Slots di Vue:

Komponen Induk

<template> <div> <child-component> <p>Konten atau Data ini berasal dari komponen induk.</p> </child-component> </div></template>

Komponen Anak

<template> <div> <slot></slot> </div></template>

Contoh Slots

Contoh ini mengilustrasikan implementasi dasar Slots VueJS.

Langkah 1: Jalankan perintah berikut di terminal VSCode untuk membuat proyek Vue dan menginstal paket Vue-router.

vue create slots-example-appcd slots-example-appnpm install -g @vue/[email protected] create .npm install vue-router

Langkah 2: Buat struktur direktori sesuai dengan gambar berikut (referensi visual tidak disertakan).

Langkah 3: Masukkan kode file berikut ke dalam file masing-masing.

<!--src/components/ParentComponent--><template> <div> <child-component> <p>Konten dari komponen induk.</p> </child-component> </div></template>

File paket dan dependensi untuk referensi:

package:

{ "name": "slots-example-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.2.4" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ], "_id": "[email protected]", "readme": "ERROR: No README data found!"}

Langkah 4: Jalankan aplikasi dengan perintah berikut di terminal.

npm run serve

Scoped Slots VueJS

Di Vue, Scoped Slots juga disebut Named Slots karena memungkinkan kita mengirim konten atau data dari komponen induk atau dasar ke komponen anak dengan data dinamis. Tidak seperti Slots biasa yang bersifat statis, Scoped Slots memungkinkan kita mengirim data dinamis dari induk ke anak. Ini memungkinkan komponen anak untuk benar-benar merender data berdasarkan konten yang dikirim oleh induk, menjadikannya lebih berbasis data dan dapat disesuaikan.

Sintaks Scoped Slots

Berikut adalah sintaks Scoped Slots di Vue:

Komponen Induk

<template> <div> <child-component> <template #default="slotProps"> <p>{{ slotPropst}}</p> </template> </child-component> </div></template>

Komponen Anak

<template> <div> <slot name="default" :message="content"></slot> </div></template><script>export default { data() { return { message: "Ini adalah Konten Dinamis dari Komponen Anak" }; }};</script>

Contoh Scoped Slots

Contoh ini mengilustrasikan Scoped Slots di VueJS.

Langkah 1: Buat struktur direktori dan masukkan kode file berikut ke dalam file masing-masing.

<!-- src/components/ParentComponent --><template> <div> <label for="messageInput">Masukkan pesan:</label> <input v-model="userMessage" id="messageInput" type="text" /> <child-component :user-message="userMessage"> <template #dataSlot="slotProps"> <p>{{ slotProps }}</p> <button @click="reverseMessage(slotProps)">Balik Pesan</button> </template> </child-component> </div></template><script> import ChildComponent from './ChildComponent'; export default { components: { ChildComponent }, data() { return { userMessage: "Halo dari ParentComponent" }; }, methods: { reverseMessage(message) { if (message) { thisssage = message('').reverse().join(''); } } } };</script>

package

{ "name": "slots-example-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.2.4" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ], "_id": "[email protected]", "readme": "ERROR: No README data found!"}

Langkah 2: Jalankan aplikasi dengan perintah berikut di terminal.

npm run serve

Perbedaan antara Slots dan Scoped Slots