מבוא לרכיבי Vue

מבוא

כאשר מפתחים אפליקציה גדולה, תמיד מומלץ לפרק אותה לרכיבים קטנים יותר כדי להקל על הקריאה, המבנה והתחזוקה של הקוד. רוב המתחילים של Vue מבינים מהם הרכיבים לפחות מבחינה רעיונית, אך ייתכן שהם לא יבינו מה הם יכולים ומה הם לא יכולים לעשות במלואם.

במדריך זה, נסקור מהו רכיב ב-Vue, כיצד הוא עובד, כיצד להעביר נתונים ואירועים דרכם ועוד ועוד.

מהו רכיב Vue?

רכיבי הם מופעים לשימוש חוזר של רכיבי Vue הכוללים תבניות, סגנונות ורכיבי JavaScript. כל רכיב הוא "הדבר שלו", בדומה לאופן שבו כל רכיב HTML הוא "הדבר שלו", וגם רכיבי Vue ורכיבי HTML מאפשרים לנו להשתמש בהם כאבני בניין לדפי אינטרנט.

אתה יכול לחשוב על רכיבי Vue כרכיבי HTML חדורי JavaScript, שאתה יכול להגדיר ולתפעל בעצמך.

יישום Vue טיפוסי מורכב ממספר רב של רכיבים שניתן לעשות בהם שימוש חוזר כמה פעמים לפי הצורך.

לדוגמה, באתר רגיל יש קטעים המופיעים בכל הדפים - סרגל ניווט, כותרת עליונה, כותרת תחתונה וכן הלאה. לכן, זה נחשב נוהג טוב להפוך כל אחד מהם לרכיב נפרד. בדרך זו, אנו יוצרים קוד מובנה היטב, קריא, לשימוש חוזר וניתן לתחזוקה בקלות:

כיצד ליצור רכיב Vue

ישנן שתי דרכים בסיסיות ליצור רכיב Vue, תלוי איך הפרויקט שלנו נוצר - עם או בלי הגדרת בנייה. במקרה הראשון, כל רכיב מאוחסן בקובץ נפרד. במקרה השני, יכולים להיות מספר רכיבים בקובץ בודד.

צור רכיבי Vue עם הגדרת Build

רוב הפרויקטים נוצרים באמצעות התקנה לבנות, המאפשר לנו ליצור רכיבי קובץ בודד (SFCs) – קבצי רכיבים ייעודיים עם ה .vue סיומת. זה מאפשר לנו לכלול את התבנית, ההיגיון והסגנון של רכיב Vue בקובץ אחד:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

צור רכיבי Vue ללא הגדרת Build

אם אתה, מכל סיבה שהיא, לא יכול להשתמש במנהל חבילות כגון npm כדי להתקין Vue במחשב שלך, אתה עדיין יכול להשתמש ב-Vue באפליקציה שלך. חלופה לבניין Vue באמצעות npm זה להתקין Vue דרך a CDN (רשת למסירת תוכן) ישירות באפליקציה שלך. בוא נעבור במהירות על הדרך הזו ליצירת רכיב Vue.

התקנת Vue ללא build תאפשר לנו להשתמש בפונקציות ספציפיות ל-Vue כפי שאנו עושים עם JavaScript רגיל. התחביר דומה במקצת למה שראינו ב-SFCs הרגילים:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

במדריך זה נשתמש ב- תחביר SFC, מכיוון שזו השיטה הנפוצה ביותר ליצירת רכיבים.

כיצד לרשום רכיבים ב-Vue

עד כה, ראינו כיצד ליצור רכיבים ב-Vue. השלב הבא יהיה להשתמש ברכיבים אלו בתוך רכיב אחר (היררכיה של הורה-ילד).

לשם כך, עלינו לרשום תחילה רכיבים שאנו רוצים להשתמש בהם. רישום זה כרוך בייבוא ​​ולאחר מכן רישום רכיבים. ישנן שתי אפשרויות לעשות זאת - גלוֹבָּלִי ו רישום מקומי.

רכיבי Vue - רישום גלובלי

רכיבים הרשומים ברחבי העולם, כפי שהשם מרמז, זמינים ברחבי העולם, מה שאומר שניתן להשתמש בהם בכל רכיב של האפליקציה שלנו מבלי שנצטרך לייבא אותם שוב. זה מושג על ידי רישום רכיב באמצעות app.component() שיטה:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

במצב שבו יש לנו מרכיבים רבים, אנחנו יכולים שרשרת אותם ככה:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

לאחר שרשמנו את הרכיבים שלנו, נוכל להשתמש בהם בתבנית של כל רכיב בתוך יישום זה באמצעות התחביר הבא:

<ChildComponent/>
<ProfileComponent/>

רכיבי Vue - רישום מקומי

אנו נשתמש ברישום מקומי ברוב המקרים מכיוון שהוא מאפשר לנו להגדיר את הזמינות של הרכיבים הרשומים שלנו. ייבוא ​​רכיבים אלה ולאחר מכן הוספתם ל- components האפשרות משיגה את זה:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

בעת מתן שמות לרכיבים, השתמש CamelCase כדי להבהיר שזהו רכיב Vue ולא אלמנט HTML מקורי בתבניות. זה גם מקל על ייבוא ​​ורישום רכיבים ב-JavaScript.

כיצד להעביר נתונים דרך רכיבי Vue

אחד היתרונות של יצירת רכיבים הוא היכולת לעשות שימוש חוזר בקוד על ידי הפיכתו למודולרי.

נניח שאנו יוצרים רכיב פרופיל משתמש שצריך לקבל את הנתונים של כל תלמיד מדף הפרופיל; במקרה זה, עלינו להעביר את הנתונים הללו ממרכיב הפרופיל (רכיב האב) לרכיב פרופיל המשתמש (רכיב הילד), ואנו נשתמש באביזרים.

אבזרים

אביזרים הם תכונות מותאמות אישית שאנו יכולים לרשום על רכיב, כך שנוכל להעביר נתונים מהרכיב האב לרכיב הבן באמצעות props אפשרות בתוך תג הסקריפט:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

חריצים

חריצי Vue הם מקומות שמורים המאפשרים לנו להעביר כל סוג של תוכן מרכיב אחד לאחר. זה נותן שליטה ריכוזית יותר מאביזרים מכיוון שבניגוד לאביזרים, רכיב האב שולט בתוכן בתוך רכיב הצאצא. לדוגמה, נוכל ליצור את הכפתור הבא:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

אז נוכל להשתמש ברכיב הזה בכל מקום שנרצה ולתת לו את התוכן שאנו רוצים. אי מתן תוכן אומר שהוא יעשה שימוש בערך ברירת המחדל שנתנו לו (לחץ עליי):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

כיצד לפלוט אירועים מרכיבי Vue

למדנו שהאביזרים משמשים לשליחת נתונים מהרכיב האב אל רכיב הילד. אבל אנחנו עשויים לתהות אם יש דרך לשלוח משהו מהרכיב הבן לרכיב האב. והתשובה היא כן, ניתן לשלוח אירועים גם מהרכיב הבן לרכיב האב.

נניח שיש לנו רכיב אב (App.vue) המכיל רכיב צאצא בודד (MyBlogPost.vue). יתר על כן, רכיב הילד מכיל כפתור שאמור לשנות את הכותרת.

נניח שאנו רוצים לשנות את הכותרת של הדף שלנו כאשר לוחצים על כפתור, כך שפונקציה תופעל:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

ורכיב הילד ייראה כך:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

סיכום

במדריך זה, למדנו כיצד לעבוד עם רכיבים ב-Vue, שהוא חיוני לכל מי שמשתמש ב-Vue. למדנו גם איך לשלוח ולקבל נתונים, כמו גם איך לפלוט אירועים.

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://stackabuse.com/introduction-to-vue-components/