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狀態管理