Vue JS组件结构

Question

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

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

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

我的问题是:将调用封装到每个组件中是否正确？或者，在通用应用程序中获取所需的数据，然后使用pros与组件共享结果更好？

我的问题是，因为现在开始了最难的部分，当我想要将类别的单击传递给venuesNearYou组件时，我尝试使用emit，但没有成功。

//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 app (没有vuex)中有三种类型的通信-父对子通信，这是由道具填充的字段-子对父通信，由来自子的自定义事件处理，由父监听-非父子组件之间的通信，其中我们使用事件总线方法，父对子通信示例-

子代到父代示例-在子代this.$emit('sendDataToParent'，{someData:"some data"}}) -在父代

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

在要从中发送数据的某些组件中，导入eventBus eventBus.$emit( 'some‘，’some data')

在从其接收数据一些组件中

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应用程序中所有组件的集中存储。