I have 3 vue components, Component A uses an event listener to gather the data from the HTML text a user clicks on and stores it into a variable. Component B will take the data and make an API call to display in a table. Component C uses Component A to render a diagram and Component C will use Component B to render a table below the diagram.
Component A:
mounted() {
window.addEventListener('node_clicked', (e) => {this.nodeName = e.detail.name})
},
data() {
return {
nodeName: ''
};
Question:
How can I pass my data from Component A to Component B in order to make an API call for the table it will render in Component C?
Passing data from one component ( A ) to ANOTHER COMPONENT ( B ), will depend on where you use the B component.
If component B is a direct child component of component A.
You can easily pass data by props.
If component B is a deep child component of component A.
You can use inject/provide
If component B is a parent of component A.
You can emit an event
If component A and component B are used in different places in the code base.
You can create your own state management store or you can use a library like Vuex