Vue Academy · บทเรียน

provide() ในคอมโพเนนต์แม่

การส่งค่าพื้นฐาน รีแอกทีฟรีฟ และออบเจ็กต์ พร้อมรักษาความเป็นรีแอกทีฟผ่าน provide

provide() ในคอมโพเนนต์แม่ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

ฟังก์ชัน provide

Vue provide ช่วยให้คอมโพเนนต์ส่งข้อมูลให้คอมโพเนนต์ลูกหลานทั้งหมดได้ เรียกใช้ใน <script setup> พร้อมคีย์และค่า

import { provide } from "vue";
provide("message", "Hello from ancestor");

คอมโพเนนต์ลูกหลานใด ๆ ก็ฉีดค่าได้

เมื่อให้ค่าแล้ว คอมโพเนนต์ใด ๆ ที่อยู่ด้านล่างในแผนผังก็สามารถฉีดค่าด้วยคีย์เดียวกันได้ ไม่ว่าจะอยู่ลึกกี่ชั้น โดยไม่ต้องให้คอมโพเนนต์ระหว่างทางทำอะไร

App (provides "message")
  -> ... -> DeepChild (injects "message")

การให้สถานะที่ตอบสนอง

เพื่อให้คอมโพเนนต์ลูกหลานตอบสนองต่อการเปลี่ยนแปลงได้ ให้ส่ง ref หรือออบเจ็กต์ที่ตอบสนอง แทนค่าธรรมดา การอัปเดตค่าที่อ้างอิงจะส่งต่อไปยังผู้ใช้ทุกตัวโดยอัตโนมัติ

import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);

การตอบสนองไหลลงด้านล่าง

เมื่อคอมโพเนนต์บรรพบุรุษเปลี่ยน theme.value คอมโพเนนต์ลูกหลานทุกตัวที่ฉีดค่านี้จะเรนเดอร์ใหม่ด้วยค่าใหม่ นี่คือข้อได้เปรียบสำคัญเมื่อเทียบกับการส่งสำเนาคงที่

function toggle() {
  theme.value = theme.value === "dark" ? "light" : "dark";
}

ปกป้องสถานะด้วย readonly

โดยค่าเริ่มต้น คอมโพเนนต์ลูกหลานอาจแก้ไขค่าอ้างอิงที่ฉีดเข้ามาได้ ซึ่งทำให้การเปลี่ยนแปลงสถานะกระจัดกระจายและทำลำดับการไหลของข้อมูลทางเดียวเสียหาย ให้ครอบค่าด้วย readonly() เพื่อให้ผู้ใช้ค่าอ่านได้แต่เขียนไม่ได้

import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));

ให้ฟังก์ชันเป็นการกระทำ

หากต้องการให้คอมโพเนนต์ลูกหลานร้องขอการเปลี่ยนแปลงได้ ให้ฟังก์ชันควบคู่ไปกับสถานะที่อ่านได้เท่านั้น ผู้ใช้ค่าจะเรียกใช้ฟังก์ชัน และมีเพียงผู้ให้ค่าเท่านั้นที่แก้ไขแหล่งข้อมูล

function updateName(name) {
  user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);

รวมสถานะและการกระทำ

รูปแบบที่สะอาดคือการให้ค่าเป็นออบเจ็กต์เดียวซึ่งประกอบด้วยสถานะที่อ่านได้เท่านั้นและการกระทำของสถานะนั้น คล้ายกับที่เก็บสถานะขนาดเล็ก

provide("userStore", {
  user: readonly(user),
  updateName
});

provide ระดับแอป

คุณยังสามารถให้ค่าในระดับแอปได้ ทำให้ค่านั้นพร้อมใช้งานในทุกคอมโพเนนต์ โดยตั้งค่าเพียงครั้งเดียวบนอินสแตนซ์ของแอป (จะกล่าวถึงโดยละเอียดในภายหลัง)

app.provide("appName", "CoddyKit");

ใช้คีย์สัญลักษณ์เพื่อหลีกเลี่ยงการชนกัน

คีย์สตริงอาจชนกันในแอปขนาดใหญ่ ให้ใช้ Symbol ที่ส่งออกจากโมดูลส่วนกลางเป็นคีย์เพื่อรับประกันความไม่ซ้ำกัน

// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);

เมื่อใดควรใช้ provide

provide เหมาะสำหรับ theme ผู้ใช้ปัจจุบัน การรองรับหลายภาษา formContext หรือการกำหนดค่าฟีเจอร์ ซึ่งเป็นค่าที่คอมโพเนนต์ทั้งส่วนย่อยต้องใช้ แต่หากมีเพียงหนึ่งหรือสองระดับ การใช้พร็อพธรรมดายังคงง่ายกว่า

ขอบเขตของผู้ให้ค่า

ค่าที่ให้ไว้จะมีขอบเขตอยู่ภายในส่วนย่อยของคอมโพเนนต์ผู้ให้ค่า ส่วนย่อยของคอมโพเนนต์พี่น้องสองส่วนสามารถให้ค่าที่ต่างกันภายใต้คีย์เดียวกันได้โดยไม่รบกวนกัน

ตรวจสอบความเข้าใจ

คุณจะป้องกันไม่ให้คอมโพเนนต์ลูกหลานแก้ไขสถานะที่ให้ไว้ได้อย่างไร

ทบทวน

คุณได้เรียนรู้ว่า provide(key, value) เปิดเผยข้อมูลให้คอมโพเนนต์ลูกหลานทั้งหมด ให้ค่าเป็น ref เพื่อคงการตอบสนอง ครอบค่าด้วย readonly() เพื่อป้องกันการแก้ไข ให้ฟังก์ชันเป็นการกระทำ และควรใช้คีย์ Symbol เพื่อหลีกเลี่ยงการชนกัน

คำถามที่พบบ่อย

บทเรียน “provide() ในคอมโพเนนต์แม่” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “provide() ในคอมโพเนนต์แม่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “provide() ในคอมโพเนนต์แม่”

การส่งค่าพื้นฐาน รีแอกทีฟรีฟ และออบเจ็กต์ พร้อมรักษาความเป็นรีแอกทีฟผ่าน provide คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “provide() ในคอมโพเนนต์แม่” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy