从子组件访问父查询对象的最佳实践答案

【问题标题】：Best practice for accessing parent query object from child components从子组件访问父查询对象的最佳实践
【发布时间】：2020-04-04 04:45:27
【问题描述】：

我有一个“事件”页面，它针对具有给定 ID 的事件运行 Apollo 查询。有多个子组件使用事件对象来访问各种属性。我正在努力寻找使该对象可用于子组件的最佳模式。我是否想在仅访问缓存的子组件中进行其他查询？或者有没有办法让组件延迟到查询完成。

【问题讨论】：

标签： apollo-client vue-apollo

【解决方案1】：

一般来说，我只从“页面”组件运行查询，并将数据作为 props 向下传递到较低级别的组件：

所以我会做类似的事情

/pages/EventPage.vue

<template>
  <div>
    <EventDetails :event="event">
  </div>
</template>

<script>
import EventDetails from '/wherever/my/component/is/EventDetails.vue'
import MY_EVENT_QUERY from '/wherever/my/query/is/EventQuery.gql'

export default {
  apollo: {
    event: {
      query: MY_EVENT_QUERY
    }
  }
}
</script>

/components/EventDetails.vue

<template>
  <div>
    {{event.name}}
  </div>
</template>

<script>
export default {
  props: {
    event: {
      type: Object,
      default: { name: '' }
    }
  }
}
</script>

可能很少有子组件会获取自己的数据。我正在考虑一个表单，其中您有选择框，需要加载下拉项目列表或其他内容。但我不会一遍又一遍地重新查询同一个事件项。

【讨论】：