Vue JS 组件结构

Question

我正在学习 Vue，我怀疑我的 Vue 应用程序的结构。

我了解到组件可以同时包含逻辑和模板。然后我分离了我的组件，每个人都从主应用程序中获取配置（配置是一个坐标为 config.ll、config.lng 的对象）。

我对我的搜索和发现 API 服务进行 ajax 调用，并在每个组件中显示结果（当前位置、您附近的场所等）。

我的问题是：将调用封装到每个组件中是否正确？还是在通用应用程序中获取所需数据然后使用专业人员与组件共享结果更好？

我问的是，因为当我想将类别的点击传达给场所附近的组件时，困难的部分现在开始了，所以我尝试使用发射但没有成功。

//MAIN
<sidebar :config="config"></sidebar>
<content :config="config"></content>

//IN SIDEBAR
<currentLocation :config="config"></currentLocation>
<categories :config="config"></categories>

//IN CONTENT
<venueDetails :config="config"></venueDetails>
<venuesNearYou :config="config"></venuesNearYou>

Answer 1

我认为您可以使用类似事件总线的方法 我们在 vue 应用程序中有三种类型的通信（没有 vuex） - 亲子交流，道具全场 - 孩子到父母的通信句柄由来自孩子的自定义事件由父母收听 - 我们使用事件总线方法的非父子组件之间的通信 父母对孩子的例子 -

孩子到父母的例子 - 在孩子 this.$emit('sendDataToParent',{someData:"some data"}}) - 在父母

事件总线 在主 vue 实例中 const eventBus = new Vue()

在某些组件中从哪里发送数据 导入事件总线 eventBus.$emit('someEvent','一些数据')

在某个组件中从哪里接收数据

created() {
// register listener
  eventBus.$on('someEvent',()=>{

}) }

更多参考 https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1

Answer 2

由于您没有提供太多代码，因此很难帮助您发出事件。但是请检查Vuex。它作为 Vue 应用程序中所有组件的集中存储。