Question

我按如下方式启动项目。

vue init nuxt/express

我的目录是......

components
|- slider.vue
|- list.vue
pages
|- index.vue

和组件是，

index.vue

<template>
  <my-slider/>
  <my-list/>
</template>
<script>
import MySlider from '~components/slider'
import MyList from '~components/list'
export default {
  components: {
    MySlider,
    MyList
  },
   asyncData () {
    ... axios get ...
    return {
        img: response.data.img
    }
  }
}
</script>

我设置了以下结构。

如果发生GET /请求，

我想从每个组件（MySlider，MyList）中的数据库导入数据。

每个组件（MySlider，MyList）是否需要从asyncData（）发出axios请求？我应该从索引组件asyncData（）生成axios请求吗？
如何设置数据以在请求后初始化axios响应数据？

Answer 1

您决定如何设置数据。如果您在两个子组件中使用相同的数据，我将从父组件中获取它们，并使用属性将其发送到MySlider和MyList组件。

如果两个组件中的数据彼此无关，我可能会尝试将这些组件尽可能松散地耦合，并让它们在需要时获取它们的数据。

查看VueJS的生命周期钩子，了解如何挂钩组件上发生的任何生命周期事件;这些钩子允许您在需要时立即获取数据（读取：创建/装载组件后/您想要的任何内容）：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

我想在vue.js（nuxt.js）中加载和填充每个组件的数据

1 个答案: