Vue.js-کابردها-کتابخانه جاوااسکریپتدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

کامپوننت‌ها در Vue.js

کامپوننت‌ها در Vue.js یکی از مهم‌ترین ویژگی‌ها برای سازماندهی کد و ساختار پروژه هستند. آن‌ها قابلیت استفاده مجدد از کد را فراهم می‌کنند و باعث خوانایی بهتر کد می‌شوند.

1. تعریف کامپوننت به‌صورت محلی (Local Components)

می‌توان یک کامپوننت را داخل یک کامپوننت دیگر تعریف و استفاده کرد:

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>

فایل HelloWorld.vue:

<template>
  <h1>سلام دنیا!</h1>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

2. تعریف کامپوننت به‌صورت سراسری (Global Components)

اگر بخواهید یک کامپوننت را در کل برنامه در دسترس داشته باشید، می‌توان آن را به‌صورت سراسری ثبت کرد.

در main.js:

import { createApp } from "vue";
import App from "./App.vue";
import HelloWorld from "./components/HelloWorld.vue";

const app = createApp(App);

app.component("HelloWorld", HelloWorld);

app.mount("#app");

اکنون می‌توان HelloWorld را در هرجای پروژه استفاده کرد بدون نیاز به import.

3. ارسال props به کامپوننت‌ها

props به شما امکان ارسال داده از کامپوننت والد به فرزند را می‌دهد.

کامپوننت والد:

<template>
  <HelloWorld message="سلام Vue!" />
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  components: { HelloWorld },
};
</script>

کامپوننت فرزند (HelloWorld.vue):

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  props: ["message"],
};
</script>

4. ارسال رویداد از فرزند به والد (emit$)

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

کامپوننت والد:

<template>
  <ChildComponent @send-message="handleMessage" />
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      alert("پیام از فرزند: " + message);
    },
  },
};
</script>

کامپوننت فرزند (ChildComponent.vue):

<template>
  <button @click="$emit('send-message', 'سلام از فرزند!')">
    ارسال پیام به والد
  </button>
</template>

5. اسلات‌ها (Slots) در کامپوننت‌ها

اسلات‌ها برای ارسال محتوا به داخل کامپوننت فرزند استفاده می‌شوند.

والد:

<template>
  <CardComponent>
    <p>این متن درون اسلات قرار دارد.</p>
  </CardComponent>
</template>

<script>
import CardComponent from "./CardComponent.vue";

export default {
  components: { CardComponent },
};
</script>

فرزند (CardComponent.vue):

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}
</style>