
Business Intelligence as a Service
Try PlusClouds Eaglet service and find high quality B2B hot leads and opportunites with AI support.
When developing an application with Vue.js, we separate all parts into individual components, building a structure on top of this. This not only provides us with a more organized structure but also prevents us from having to write the same code multiple times or making the same adjustments in dozens of places when a change is needed.
Of course, this is not specific to Vue.js or something suggested here, and there is a general software principle known as DRY (Don't Repeat Yourself) related to this topic. This principle is one of the fundamental principles of software and advocates that code duplication should be avoided. (It is named DRY and explained in depth in "The Pragmatic Programmer" book.)
By adhering to this principle and logic, we create components in our projects, which have dynamic data, and we need to pass this data from parent components to child components (parent to child), from child components to parent components (child to parent), and between lower-level components (child to child). Let's look at how we can perform these data transfer operations.
We use the props structure when transferring data from the parent component to the child component. We can use the data we send via props in the child component just like a value we define within data.
Parent Component
// Here, we are assigning a static value to the title.
// Here, we send the Title value defined in the item of the parent component to the title value defined in the child component.
Child Component
Child Component
To catch these emits in the parent, we use it as @emitName or v-on:emitName.
Parent Component
Here, since we do not have a direct relationship like parent-child, we need to use an intermediary, and we use the eventbus instance here. We create this instance as a Vue instance that does not bind to any DOM element, and we will only use this instance to transfer data. All components can send events here, and all components that listen here can take action according to the incoming data.
Here, we will first add an eventBus instance to the event-bus.js as mentioned.
Then it will be enough for us to import it in the pages we will use. We did not define it globally, as we will use it only between two components.
In our current example, let's update the title in Component A by clicking the button in Component B.
Child A Component
Child B Component
With the above 3 methods, we can carry out data transfers between components.
If you are a journalist, who has desire to dig deep in topics related to businesses and sectors, we want to work with you!
With the AutoQuill tool that PlusClouds has started to offer to its affiliate partners, content creators will be able to sell with a single click. Let us show you how you can get your share of this revolution.