[英]Vue JS Components structure
I am learning Vue and my doubt is about the structure of my Vue app.我正在学习 Vue,我怀疑我的 Vue 应用程序的结构。
I learnt that the components can include both logic and template.我了解到组件可以包括逻辑和模板。 Then I separated my components and everyone is getting the config from the main app (config is an object with the coordinates config.ll, config.lng).然后我分离了我的组件,每个人都从主应用程序获取配置(config 是一个坐标为 config.ll、config.lng 的对象)。
I do the ajax call to my search-and-discovery API service and I display the results inside each components (current location, venues-near-you etc).我对我的搜索和发现 API 服务进行 ajax 调用,并在每个组件中显示结果(当前位置、您附近的场所等)。
My question is: is it correct to encapsulate the calls into each components?我的问题是:将调用封装到每个组件中是否正确? Or is it better to get the needed data inside the general app and then share the results with the components using pros?还是在通用应用程序中获取所需数据然后使用专业人员与组件共享结果更好?
I am asking that because the hard part is starting now when I want to communicate the click of a category to the venuesNearYou component, I tried to use the emit without success.我问这个问题是因为当我想将类别的点击传达给场所附近的组件时,困难的部分现在开始了,我尝试使用发射但没有成功。
//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>
I think you could use event Bus like approach we have three type of communication in vue app (without vuex)我认为您可以使用类似事件总线的方法,我们在 vue 应用程序中有三种类型的通信(没有 vuex)
Child to parent example孩子到父母的例子
Event Bus in main vue instance const eventBus = new Vue()主 vue 实例中的事件总线 const eventBus = new Vue()
in some component from where to send data import eventBus eventBus.$emit('someEvent','some data')在某些组件中从哪里发送数据 import eventBus eventBus.$emit('someEvent','some data')
in some component from where to receive data在某些组件中从哪里接收数据
created() {
// register listener
eventBus.$on('someEvent',()=>{
}) } }) }
For more reference https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props https://v2.vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1更多参考https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props https://v2.vuejs.org/v2/guide/components。 html#Emitting-a-Value-With-an-Event https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.