在没有子/父的组件之间共享数据 - Vue

Posted

技术标签:

【中文标题】在没有子/父的组件之间共享数据 - Vue【英文标题】:Sharing Data Between Components without child/parent - Vue 【发布时间】:2020-02-24 03:55:03 【问题描述】:

我有 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 组件和内部子组件一和子组件二。

这可能吗?

【问题讨论】:

试试 eventbus,或者更复杂的应用 Vuex 【参考方案1】:

有很多方法可以共享来自不同组件的数据:

    uex

vuex 是管理应用程序状态的最佳方式,但对于小型项目来说更加繁重

    自定义事件

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 来投射您的数据并使用 storage 事件来获取您的数据,您将在更改 customData 值时调度 storage 事件:

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
  

)

【讨论】:

以上是关于在没有子/父的组件之间共享数据 - Vue的主要内容,如果未能解决你的问题,请参考以下文章

vuex 实现vue中多个组件之间数据同步以及数据共享。

在所有 Vue.js 组件之间共享数据

Vue3组件(18)组件间传值/共享的方法的汇总

为啥用 vue-apollo 在两个独立组件之间共享组件数据?

源码分析vuex如何维护多个组件的数据共享

Vue组件之间的数据共享