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

Question

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

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

我可以在我的 Home 组件中获取帖子，但我认为 Posts 组件应该对此负责。 此外，如果我有很多组件，我不想在我的 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
    },
}

帖子.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。 它使您可以在许多组件之间共享状态。

一些资源：

什么是Vuex？

Vuex状态管理