How can I create reusable components in Vue 3?

How can I create reusable components in Vue 3?

To create reusable components in Vue 3, you can define a component using the defineComponent function and then use it in your templates.

Can you give me an example of a simple reusable button component?

Sure! Here's a simple button component:

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: {
      type: String,
      required: true
    },
    onClick: {
      type: Function,
      required: true
    }
  },
  template: `<button @click="onClick">{{ label }}</button>`
});

How do I use this button component in my app?

You can use the button component in your app like this:

<template>
  <MyButton label="Click Me" :onClick="handleClick" />
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: { MyButton },
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>