The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Props and Custom Events

Next ►
►

In this section, we will delve into two fundamental concepts in Vue.js: Props and Custom Events. These concepts are crucial for enabling communication between components, making your applications more modular and maintainable.

Props

Props (short for properties) are a way to pass data from a parent component to a child component. They are a key feature in Vue.js for creating reusable and dynamic components.

Key Concepts

  1. Defining Props: Props are defined in the child component using the props option.
  2. Passing Props: Props are passed from the parent component to the child component using custom attributes.
  3. Prop Validation: Vue.js allows you to specify the type, required status, and default values for props.

Example

Let's create a simple example to illustrate how props work.

Parent Component (App.vue):

<template>
  <div id="app">
    <child-component message="Hello from Parent!"></child-component>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  }
};
</script>

Child Component (ChildComponent.vue):

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Explanation

  1. Parent Component: In App.vue, we import the ChildComponent and use it within the template. We pass a prop named message with the value "Hello from Parent!".
  2. Child Component: In ChildComponent.vue, we define the props option to declare that this component expects a prop named message of type String and that it is required. We then use this prop within the template.

Prop Validation

Vue.js allows you to validate props to ensure they meet certain criteria. This can help catch errors early and make your components more robust.

Example with Prop Validation:

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true,
      default: 'Default message',
      validator: function (value) {
        return value.length > 0;
      }
    }
  }
};
</script>

Custom Events

Custom events allow child components to communicate with parent components. This is essential for creating interactive applications where child components need to notify parents about certain actions.

Key Concepts

  1. Emitting Events: Child components can emit custom events using the $emit method.
  2. Listening to Events: Parent components can listen to these events using the v-on directive or the @ shorthand.

Example

Let's extend our previous example to include custom events.

Child Component (ChildComponent.vue):

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    notifyParent() {
      this.$emit('notify', 'Hello from Child!');
    }
  }
};
</script>

Parent Component (App.vue):

<template>
  <div id="app">
    <child-component message="Hello from Parent!" @notify="handleNotification"></child-component>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  methods: {
    handleNotification(payload) {
      alert(payload);
    }
  }
};
</script>

Explanation

  1. Child Component: In ChildComponent.vue, we add a button that, when clicked, calls the notifyParent method. This method uses $emit to emit a custom event named notify with a payload of "Hello from Child!".
  2. Parent Component: In App.vue, we listen for the notify event using the @notify directive and handle it with the handleNotification method, which displays an alert with the event payload.

Practical Exercise

Task

  1. Create a parent component that includes a child component.
  2. Pass a prop from the parent to the child.
  3. Emit a custom event from the child to the parent and handle it in the parent.

Solution

Parent Component (ParentComponent.vue):

<template>
  <div>
    <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message from Parent'
    };
  },
  methods: {
    handleChildEvent(payload) {
      console.log('Event received from child:', payload);
    }
  }
};
</script>

Child Component (ChildComponent.vue):

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendEvent">Send Event to Parent</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    sendEvent() {
      this.$emit('childEvent', 'Hello Parent, this is Child!');
    }
  }
};
</script>

Explanation

  1. Parent Component: We define a parentMessage in the data object and pass it as a prop to the ChildComponent. We also listen for the childEvent and handle it with the handleChildEvent method.
  2. Child Component: We display the message prop and emit a childEvent with a payload when the button is clicked.

Conclusion

In this section, we covered the basics of props and custom events in Vue.js. Props allow you to pass data from parent to child components, while custom events enable child components to communicate with parent components. These concepts are fundamental for building dynamic and interactive Vue.js applications. In the next section, we will explore slots, which provide a way to compose components in a more flexible manner.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved