Question

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

Answer 1

通常，我只从“页面”组件运行查询，并将数据作为道具传递给较低级别的组件：

所以我会做类似的事情

/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>

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

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

1 个答案: