How to useProps in Vue
In the first approach, we will first pass the value from the first child component to the parent component using props, and after which we will pass it from the parent component to the second child component.
Example: Below example demonstrates the passing of value from one child component to another using props in vuejs.
- ChildComponent.vue
HTML
<template> <div> <h2>I'm a Child Component</h2> <p>Received Message: {{ msg }}</p> </div> </template> <script> export default { name: "ChildComponent", props: { msg: { type: String, required: true, }, }, }; </script> |
- App.vue
HTML
<template> <div> <h1 style="color: green">w3wiki</h1> <h2>I'm an Parent Component</h2> <p>Sent Message: {{ msg }}</p> <ChildComponent :msg="msg" /> </div> </template> <script> import ChildComponent from "./components/ChildComponent.vue"; export default { name: "App", data() { return { msg: "Welcome Geek from App", }; }, components: { ChildComponent, }, }; </script> |
Output:
How to Pass Value from One Child Component to Another in VueJS ?
Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components.
In this article, we will learn how to pass value from one child component to another in VueJS. There are sometimes when we need to pass data from one child component to another, either for communication or to update the state of the components.
Contact Us