Passing Data between vue components-CodePudding

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?

CodePudding user response：

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