Vue.js Props

What are props in Vue.js?

Props (short for properties) are a mechanism in Vue.js for passing data from a parent component to a child component. They allow components to communicate with each other and enable the reuse of components with different data.

How do you define props in a Vue component?

Props can be defined in a Vue component using the props option in the component's export default object. You can specify the type of the prop and whether it is required.

Vue.component('my-component', {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  template: '{{ title }} - Count: {{ count }}'
});

How do you pass props to a child component?

Props are passed to a child component by binding them in the parent component's template using the :propName syntax. This allows you to bind data from the parent component to the prop in the child component.

const app = new Vue({
  el: '#app',
  data: {
    parentTitle: 'Hello from Parent!',
    parentCount: 5
  },
  template: `
    <my-component :title="parentTitle" :count="parentCount"></my-component>
  `
});

What is the difference between required and optional props?

Required props must be provided by the parent component; otherwise, Vue will issue a warning in the console. Optional props, on the other hand, can be omitted, and you can specify a default value to be used if they are not provided.

Vue.component('my-component', {
  props: {
    requiredProp: {
      type: String,
      required: true
    },
    optionalProp: {
      type: Number,
      default: 10 // Default value
    }
  }
});

How do you validate props in Vue.js?

You can validate props in Vue.js by specifying their type and other constraints (such as required or default) in the props definition. Vue will check the types at runtime and warn you in the console if the validation fails.

Vue.component('my-component', {
  props: {
    age: {
      type: Number,
      validator(value) {
        return value > 0; // Custom validation
      }
    }
  },
  template: 'Age: {{ age }}'
});

How can you pass an object as a prop in Vue.js?

You can pass an object as a prop by using the :propName syntax to bind the object from the parent component to the child component.

const app = new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Alice',
      age: 30
    }
  },
  template: `
    <user-profile :user="user"></user-profile>
  `
});

// Child component
Vue.component('user-profile', {
  props: {
    user: Object
  },
  template: '{{ user.name }} is {{ user.age }} years old.'
});

What are dynamic props in Vue.js?

Dynamic props allow you to pass props to a component dynamically based on the component's state or computed properties. You can bind a prop to a variable using the :propName syntax.

const app = new Vue({
  el: '#app',
  data: {
    currentUser: { name: 'Bob', age: 25 }
  },
  template: `
    <user-profile :user="currentUser"></user-profile>
  `
});

How do you use props with the v-bind directive?

You can use the v-bind directive to bind props dynamically in Vue.js. This allows you to pass the result of an expression as a prop value.

const app = new Vue({
  el: '#app',
  data: {
    userName: 'Charlie'
  },
  template: `
    <greeting :name="userName"></greeting>
  `
});

// Child component
Vue.component('greeting', {
  props: ['name'],
  template: 'Hello, {{ name }}!'
});

How can you watch props in a Vue component?

You can watch props in a Vue component by using the watch option. This allows you to react to changes in the prop's value and perform actions accordingly.

Vue.component('my-component', {
  props: ['user'],
  watch: {
    user(newVal, oldVal) {
      console.log('User changed from', oldVal, 'to', newVal);
    }
  },
  template: 'User: {{ user.name }}'
});