Sharing Data Between Components without child/parent - Vue

Question

I have html site. And i want to implement some vue js components on page. For example, in my header i want to have input field (one vue component).

<header><search-component></search-component></header>

And in my main html i have second vue component who display some search results from first vue component.

<main><list-component></list-component></main>

Hove i send data from search component to list component?

HTML is this:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
       <div id="app">
            <header>
                <search-component></search-component>
            </header>

            <main>
                <list-component></list-component>
            </main>
        </div>    
    </body>

</html>

Of course this html is simplified version... The point of everything is to non have one main App.vue component and inside child component one and child component two.

Is that possible?

baihai chan baihai chan · Accepted Answer · 2019-10-29T04:05:25

there are many ways to share data from different components:

uex

vuex is the best way to manage your apps state,but is much more heavy for small project

customevent

customevent is easier than vuex to cast data in your app

var event = new CustomEvent('customE', {
        "detail": {
          //your data here
        }
      })
window.dispatchEvent(event)
//get data
window.addEventListener("customE", (e)=>{
//get your data here
e.detail
});

storage

you can use localstorage or sessionstorage to cast your data and use storage event to get your data,you will dispatch storage event as you change customData value:

localStorage.customData = JSON.stringify('your Json data')
window.addEventListener('storage', (e) => {
//make sure you filter your data key
  if (e.key === 'customData') {
    //get your data here
    e.newValue
  }
}
)

Sharing Data Between Components without child/parent - Vue

1 Answers