Javascript 如何在VueJS中存储和访问eventBus上的数据
基本上,我希望能够通过将dataBus设置为vue实例对象来访问一些集中的数据,然后从不同的组件访问和调整这些数据 我似乎无法通过组件中的数据进行访问,即使是基本的字符串插值也无法渲染到DOM中Javascript 如何在VueJS中存储和访问eventBus上的数据,javascript,vue.js,event-bus,Javascript,Vue.js,Event Bus,基本上,我希望能够通过将dataBus设置为vue实例对象来访问一些集中的数据,然后从不同的组件访问和调整这些数据 我似乎无法通过组件中的数据进行访问,即使是基本的字符串插值也无法渲染到DOM中 export const dataBus = new Vue({ data: { numQuotes: 4, stringVar: 'Hellow There' } }); 我还尝试将数据设置为函数data()的返回。但由于我的数据总线是一个实际的vue
export const dataBus = new Vue({
data: {
numQuotes: 4,
stringVar: 'Hellow There'
}
});
我还尝试将数据设置为函数data()的返回。但由于我的数据总线是一个实际的vue实例,我认为这是不正确的。(我可能错了)。下面是我导入数据总线并尝试输出数据的组件
<template>
<div>
<h1>Quotes Added</h1>
<div id="trackerBar">
<div id="trackerBarActual">
<h2>{{numQuotes}}/10</h2>
</div>
</div>
</div>
</template>
<script>
import { dataBus } from '../main.js';
export default{
}
</script>
添加引号
{{numQuotes}}/10
从“../main.js”导入{dataBus};
导出默认值{
}
我得到以下错误:属性或方法“numQuotes”未在实例上定义,但在渲染期间被引用。确保在数据选项中声明反应数据属性
我错过了什么明显的东西吗?甚至可以通过这种方式访问数据吗?或者我必须作为一种方法访问它吗 您缺少为组件分配
数据的部分。试一试
<script>
import { dataBus } from '../main.js';
export default{
data () {
return dataBus.$data
}
}
</script>
从“../main.js”导入{dataBus};
导出默认值{
数据(){
返回数据总线。$data
}
}
不过,你绝对应该研究一下国家管理。你可能对国家集中维护感兴趣。我想你可能是对的,我还没有谈到那一章。那么就没有办法存储在eventBus上了?以下是Vue文档对这种方法的描述:“每个组件实例都有自己的独立作用域。这意味着您不能(也不应该)直接引用子组件模板中的父数据。可以使用道具将数据传递给子组件。”@Vladimir这与父/子组件数据传递完全不同。OP希望共享来自单独Vue实例的数据。数据仍被引用,不应像这样使用。事件总线/数据总线是一个单独的vue实例,他应该使用道具访问其中的数据。本视频教程应该有帮助:1,2. @Vladimir如果没有安装事件/数据总线,您会如何使用道具?无论如何,OP遇到了问题,这就是答案。如果你认为他们应该采取不同的做法,也许你可以发布自己的答案,而不是向下投票。也许你应该在开始分解框架之前,学习如何使用发射器、事件和回调函数以及道具。如果文档中说您不应该直接引用来自另一个vue实例(本例中为数据总线)的$data,那么您就不应该这样做。原因可能很简单,它将破坏与Vue未来版本的兼容性。没有vuex,使用道具是一项乏味的工作,但至少它是正确的。为了您的方便,我留下了两个教程,您可以学习如何做到这一点。