provide() dalam Komponen Induk
Menyediakan nilai primitif, ref reaktif, dan objek — mempertahankan reaktivitas melalui provide.
provide() dalam Komponen Induk adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Fungsi provide
Vue provide memungkinkan komponen menawarkan data kepada semua komponen turunannya. Panggil fungsi tersebut di dalam <script setup> dengan sebuah kunci dan nilai.
import { provide } from "vue";
provide("message", "Hello from ancestor");Komponen Turunan Mana Pun Dapat Melakukan Inject
Setelah disediakan, komponen mana pun di bagian bawah pohon dapat melakukan inject menggunakan kunci yang sama—terlepas dari jumlah lapisannya—tanpa komponen perantara perlu melakukan apa pun.
App (provides "message")
-> ... -> DeepChild (injects "message")Menyediakan State Reaktif
Agar komponen turunan tetap reaktif, sediakan sebuah ref (atau objek reaktif), bukan nilai biasa. Perubahan pada ref akan diteruskan secara otomatis kepada setiap konsumen.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);Reaktivitas Mengalir ke Bawah
Ketika komponen leluhur mengubah theme.value, setiap komponen turunan yang melakukan inject akan dirender ulang dengan nilai baru. Inilah keunggulan utama dibandingkan meneruskan cuplikan statis.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Melindungi State dengan readonly
Secara bawaan, komponen turunan dapat mengubah ref yang di-inject. Hal ini menyebarkan perubahan state dan merusak aliran data satu arah. Bungkus nilai tersebut dengan readonly() agar konsumen dapat membaca tetapi tidak menulis.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));Menyediakan Fungsi sebagai Tindakan
Agar komponen turunan dapat meminta perubahan, sediakan sebuah fungsi bersama state yang hanya dapat dibaca. Konsumen memanggil fungsi tersebut; hanya penyedia yang mengubah sumber data.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Menggabungkan State dan Tindakan
Pola yang rapi adalah menyediakan satu objek yang berisi state hanya-baca dan tindakannya, mirip dengan store kecil.
provide("userStore", {
user: readonly(user),
updateName
});Provide Tingkat Aplikasi
Anda juga dapat menyediakan nilai pada tingkat aplikasi agar nilai tersebut tersedia bagi setiap komponen, yang disiapkan satu kali pada instans aplikasi. (Hal ini akan dibahas secara lebih rinci nanti.)
app.provide("appName", "CoddyKit");Kunci Simbol untuk Menghindari Benturan
Kunci berupa string dapat bertabrakan dalam aplikasi besar. Gunakan Symbol yang diekspor dari modul bersama sebagai kunci untuk menjamin keunikannya.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);Kapan Menggunakan provide
Provide ideal untuk tema, pengguna saat ini, i18n, konteks formulir, atau konfigurasi fitur—nilai yang dibutuhkan oleh suatu subpohon. Untuk satu atau dua tingkat, props biasa tetap lebih sederhana.
Cakupan Penyedia
Nilai yang disediakan memiliki cakupan hingga subpohon komponen yang menyediakannya. Dua subpohon bersaudara dapat menyediakan nilai berbeda dengan kunci yang sama tanpa saling mengganggu.
Pemeriksaan Singkat
Bagaimana cara mencegah komponen turunan mengubah state yang disediakan?
Ringkasan
Anda telah mempelajari bahwa provide(key, value) mengekspos data kepada semua komponen turunan. Sediakan sebuah ref agar reaktivitas tetap terjaga, bungkus dengan readonly() untuk mencegah perubahan, sediakan fungsi sebagai tindakan, dan utamakan kunci Symbol untuk menghindari benturan.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “provide() dalam Komponen Induk” gratis?
Ya — teks lengkap “provide() dalam Komponen Induk” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “provide() dalam Komponen Induk”?
Menyediakan nilai primitif, ref reaktif, dan objek — mempertahankan reaktivitas melalui provide. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “provide() dalam Komponen Induk” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Masalah Prop Drilling
- provide() dalam Komponen Induk
- inject() dalam Komponen Anak
- Provide/Inject untuk State Tingkat Aplikasi