One of the main features of Vue is componentization. When components are used together, it involves the problem of data sharing. The main solution for data sharing between Vue components is component transmission. Let’s take a look…
Parent and child components pass values
Parent component passing value to child component (props)
The parent component imports and registers the child component with import, adds attributes to the child component tag, and receives them in props, either as an array [‘ Attribute name to receive ‘] or as an object {}. Object forms set the data type and default values to be passed, whereas arrays are simply received.
Specific display:
Child component passes value to parent component ($emit)
The child component fires the function by binding the event, where it sets this.$emit(‘ send event name ‘, the value to be passed). Then, in the parent component, the custom event at the child component tag is dispatched, binding the parameters that are received by the methods that the event triggers.
Specific display:
Sibling components pass values
Through the Event Bus
Create an empty vUE instance and expose it as A public BUS that acts as A bridge between the two components, introduce the BUS in each component, send data from component A via bus.emit (‘ custom event name ‘, value to be passed), Send data from component B via bus.emit(‘ custom event name ‘, value to be passed) and from component B via bus.emit(‘ Custom event name ‘, value to be passed), Accepts data in component B via bus.on(‘ custom event name ‘,function(val){//val is the value passed in}).
Specific display:
