What are some examples of prop types in Vue.js?

What are some examples of prop types in Vue.js?

In Vue.js, props are used to pass data from a parent component to a child component. Here are some examples of prop types:

1. String: type: String
2. Number: type: Number
3. Boolean: type: Boolean
4. Array: type: Array
5. Object: type: Object You can also specify default values and whether the prop is required.

Can you show me a code example of using props?

Sure! Here's a simple example:

Vue.component('my-component', {
  props: {
    title: { type: String, required: true },
    likes: { type: Number, default: 0 }
  },
  template: '<h1>{{ title }} has {{ likes }} likes</h1>'
});

What happens if I pass the wrong type of prop?

If you pass a prop of the wrong type, Vue will issue a warning in the console during development. However, the component will still render, but the prop value may not behave as expected.

Can I use custom validation for props?

Yes, you can use a custom validator function for props. Here's an example:

props: {
  age: {
    type: Number,
    validator: function (value) {
      return value >= 0 && value <= 120;
    }
  }
}