Question

我正在实现Vue.js动态组件，但似乎无法弄清楚如何仅在获取数据后才显示该组件。在此之前，它应该显示旧组件。

场景是这样的。加载页面后，它应该显示Home组件。然后，我点击“显示帖子”。在Posts组件获取其帖子之前，什么也不会发生。然后，它应该显示Posts组件。我不想显示任何负载。

我可以在Home组件中获取帖子，但我认为“帖子”组件应对此负责。另外，如果我有很多组件，我也不想在Home组件中获取所有数据。他们应该获取自己的数据（我认为）。这可能吗？

home.js

import Home from './home.js'
import Posts from './posts.js'

export default {
    template: `
        <div>
            <a @click="showPosts">Show posts</a>
            <component :is="currentComponent" />
        </div>
    `,

    methods:
    {
        showPosts()
        {
            // Do this ONLY after the Posts component has fetched it's data... not immediately...
            this.currentComponent = Posts
        }
    },

    data:
    {
        currentComponent: Home
    },
}

posts.js

export default {
    template: `
        <div>
            <div v-for="post in posts">{{ post.body }}</div>
        </div>
    `,

    data:
    {
        posts: [],
    },

    created()
    {
        axios.get('/posts').then(({ data } => {
            this.posts = data
        })
    },
}

Answer 1

如果仅在提取帖子时才显示帖子组件，唯一的方法是在父组件中获取数据。为此，通常可以将提取操作与组件分离。您有一个类似apiService的东西，它可以获取帖子，而Posts组件实际上只是视图，其唯一目的是显示数据。这样，由于许多api请求可能共享很多逻辑，因此您的代码也变得更加可重用。

这是您的组件的外观：

home.js

import Home from './home.js'
import Posts from './posts.js'
import apiService from '../services/apiService.js'

export default {
    template: `
        <div>
            <a @click="showPosts">Show posts</a>
            <component :posts="posts" :is="currentComponent" />
        </div>
    `,

    methods:
    {
        showPosts()
        {
            apiService.fetchPosts().then((response) => {
                this.posts = response.data.posts
                this.currentComponent = Posts
            });
        }
    },

    data:
    {
        posts: []
        currentComponent: Home
    },
}

Answer 2

您可以将async created挂钩与v-if语句结合使用。

因此，您基本上将模板包装在v-if

中

template: '<div v-if="dataloaded">This is component xlr</div>

在创建的异步内部加载数据，并在完成后将标志设置为true

  async created() {
  await loadData(3000);
  this.dataloaded = true;},

在这里查看有效的小提琴：https://jsfiddle.net/Postlagerkarte/yomb5qv6/

Answer 3

您的过程并不是很好的编码实践。

我建议您使用Vuex。它使您可以在许多组件之间共享状态。

一些资源：

What is Vuex?

Vuex State Management

Vue.js动态组件-仅在组件内部获取数据时加载

3 个答案: