Совместное использование данных между компонентами без дочерних / родительских элементов - Vue - PullRequest
Новая
       45

Совместное использование данных между компонентами без дочерних / родительских элементов - Vue

0 голосов
/ 29 октября 2019

У меня есть сайт html. И я хочу реализовать некоторые компоненты Vue JS на странице. Например, в моем заголовке я хочу иметь поле ввода (один компонент vue). 

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

И в моем основном html у меня есть второй компонент vue, который отображает некоторые результаты поиска из первого компонента vue. 

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

Как отправить данные из компонента поиска в компонент списка?

HTML это: 

<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>

Конечно, этот html является упрощенной версией ... Суть всего в том, чтобы не иметь одного основного компонента App.vue и внутри дочернего компонента one и childкомпонент два.

Возможно ли это?

1 Ответ

0 голосов
/ 29 октября 2019

Есть много способов обмена данными из разных компонентов:

  1. uex

vuex - лучший способ управлять состоянием ваших приложений, но он намного сложнее длянебольшой проект

customevent

customevent проще, чем vuex, использовать данные в вашем приложении 

var event = new CustomEvent('customE', {
        "detail": {
          //your data here
        }
      })
window.dispatchEvent(event)
//get data
window.addEventListener("customE", (e)=>{
//get your data here
e.detail
});
хранилище

вы можете использовать localstorage или sessionstorage для приведения ваших данных и использовать событие хранилища для получения ваших данных; вы отправите событие хранилища при изменении значения customData: 

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
  }
}
)
...