Vue ਵਿੱਚ components ਅਤੇ props ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

<!-- UserCard.vue -->
<script setup>
// declare props with types, requirements, and defaults
const props = defineProps({
  name: { type: String, required: true },
  age: { type: Number, default: 0 },
  isAdmin: { type: Boolean, default: false },
});
</script>

<template>
  <div class="card">
    <h2>{{ name }}</h2>      <!-- use props directly in the template -->
    <p>Age: {{ age }}</p>
  </div>
</template>