How do I create custom components in Vue.js?

How do I create custom components in Vue.js?

To create a custom component in Vue.js, you can define a new Vue instance with a template and script.

Can you show me a simple example?

Sure! Here's a basic example:

Vue.component('my-component', {
  template: '<div>Hello from my component!</div>'
});

You can then use <my-component></my-component> in your HTML.

What if I want to pass props to my component?

You can define props in your component like this:

Vue.component('my-component', {
  props: ['myProp'],
  template: '<div>{{ myProp }}</div>'
});

Then, use it like <my-component my-prop="Hello!"></my-component>.

How do I handle events in custom components?

You can use the v-on directive to listen for events. For example:

Vue.component('my-button', {
  template: '<button @click="handleClick">Click me!</button>',
  methods: {
    handleClick() {
      this.$emit('button-clicked');
    }
  }
});

This will emit a button-clicked event when the button is clicked.