کامپوننت ها (Components)
کامپوننت (Component) یعنی تکه مستقلِ رابط کاربری. هر کامپوننت کد و ظاهر خودش را دارد. بنابراین پروژه ها منظم تر، قابل گسترش تر و نگهداری شان راحت تر می شود.
کامپوننت دقیقا چیست؟
کامپوننت reusable است؛ یعنی دوباره استفاده می شود. همچنین self-contained است؛ یعنی همه چیزش در خودش است. بنابراین صفحه را به چند بخش کوچک تبدیل می کنیم و مدیریت آسان تر می شود.
نکته: در Vue، تگ های خاصی هم داریم مثل <Teleport> و <KeepAlive>؛ اما فعلا روی ساخت کامپوننت های خودمان تمرکز می کنیم.
ساخت اولین کامپوننت
1) پوشه components را داخل src بساز. 2) فایل FoodItem.vue را ایجاد کن. 3) محتوای زیر را در آن قرار بده.
<template>
<div>
<h2>{{ name }}<\/h2>
<p>{{ message }}<\/p>
<\/div>
<\/template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples'
};
}
};
<\/script>
<style><\/style>
افزودن کامپوننت به پروژه
ابتدا main.js را به شکل زیر مرتب کن. سپس اپ را بساز و mount کن.
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
حالا FoodItem را register کن تا در App.vue قابل استفاده باشد.
import { createApp } from 'vue';
import App from './App.vue';
import FoodItem from './components/FoodItem.vue';
const app = createApp(App);
app.component('food-item', FoodItem);
app.mount('#app');
استفاده در App.vue
الان می توانی تگ سفارشی را در template بنویسی و چند بار مصرف کنی.
<template>
<h1>Food<\/h1>
<food-item\/>
<food-item\/>
<food-item\/>
<\/template>
<script><\/script>
<style><\/style>
کامپوننت های مستقل
هر نمونه کامپوننت، state خودش را دارد. یعنی بدون id یکتا هم هر کدام جدا رفتار می کند.
برای نمایش رفتار مستقل، روی هر کارت کلیک کن تا شمارش خودش را افزایش دهد.
<template>
<div v-on:click="countClicks">
<h2>{{ name }}<\/h2>
<p>{{ message }}<\/p>
<p id="red">You have clicked me {{ clicks }} times.<\/p>
<\/div>
<\/template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples',
clicks: 0
};
},
methods: {
countClicks() {
this.clicks++;
}
}
};
<\/script>
<style>
#red {
font-weight: bold;
color: rgb(144, 12, 12);
}
<\/style>
اشاره بصری برای کلیک
برای القای کلیک پذیری، نشانگر را دست کنید.
#app > div:hover {
cursor: pointer;
}
گام های عملی سریع
- فایل FoodItem.vue را بساز.
- در main.js کامپوننت را register کن.
- در App.vue چند نمونه اضافه کن.
- dev server را با
npm run devاجرا کن.
جمع بندی سریع
- کامپوننت ها بخش های مستقل رابط هستند.
- هر نمونه state جدا دارد.
- register سراسری با
app.componentانجام می شود. - می توانی چندبار یک کامپوننت را استفاده کنی.
ادامه یادگیری در پراپ ها در کامپوننت ها. همچنین بازگشت به اولین صفحه SFC برای مرور پایه ها.