مقدمه

Vue.js یکی از محبوب‌ترین فریم‌ورک‌های جاوااسکریپت است که به توسعه‌دهندگان امکان می‌دهد تا برنامه‌های وب پویا و قابل مقیاس‌پذیری ایجاد کنند. در این مقاله، نحوه ساخت کامپوننت‌ها در نسخه Vue 3 را بررسی خواهیم کرد.

کامپوننت چیست؟

کامپوننت‌ها بخش‌های قابل استفاده مجددی از کد هستند که رفتار و ظاهر خاصی را تعریف می‌کنند. با استفاده از کامپوننت‌ها، می‌توان برنامه‌های بزرگ را به واحدهای کوچک‌تر و مدیریت‌پذیرتر تقسیم کرد.

ایجاد اولین کامپوننت در Vue 3

برای شروع، یک پروژه Vue جدید ایجاد کنید یا وارد پروژه موجود شوید. سپس یک فایل جدید با نام MyComponent.vue ایجاد کنید:

<template>
  <div>
    <h1>سلام، این یک کامپوننت است!</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

در این کد:

• بخش <template>: ظاهر کامپوننت را تعریف می‌کند.
• بخش <script>: منطق و تنظیمات کامپوننت را شامل می‌شود.

استفاده از کامپوننت

برای استفاده از کامپوننت، ابتدا باید آن را وارد کنید و سپس ثبت نمایید:

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

در این مثال، ما کامپوننت MyComponent را وارد کرده‌ایم و آن را در بخش components ثبت کرده‌ایم تا بتوانیم از آن استفاده کنیم.

ارسال داده به کامپوننت (Props)

برای ارسال داده به کامپوننت‌ها، از ویژگی props استفاده می‌کنیم. مثال:

<template>
  <div>
    <p>پیام: {{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

سپس هنگام فراخوانی کامپوننت:

<MyComponent message="سلام دنیا!" />

جمع‌بندی

در این مقاله، اصول اولیه ساخت و استفاده از کامپوننت‌ها در Vue 3 را بررسی کردیم. با تسلط بر این مفهوم، می‌توانید برنامه‌های خود را بهتر سازماندهی کنید و قابلیت نگهداری بالاتری به آن‌ها بدهید.