Vue加载组件

Question

我想实现组件的加载功能。

我的第一个想法是制作一个HOC（高阶组件），该HOC会在中接收其内容，并仅负责管理加载状态及其文本，而且没有单击事件通过。

<loading-hoc :active="loading">
    <my-component></my-component>
</loading-hoc>

我实现了这一点，并在Vue开发工具中得到了这一点：

然后，我环顾四周，发现ElementUI的实现是一个指令，并将DOM元素添加到当前组件中，如下所示 。

题：

不同方法的优缺点是什么？ 有正确的方法吗？

照我看来：

a）用作HOC：

• 开发工具中的详细树（减号）

b）使用指令

• 从组件外部（减去）将DOM节点添加到组件中

Answer 1

最简单的方法是在data属性中添加一个初始化为true的属性加载，并使用此属性通过v-if控制加载元素的可见性

简单的演示：

<div id="app">
    <div v-if="loading" class="loading">Loading...</div>

    <h5>{{content}}</h5>
</div>

脚本

new Vue({
    el: '#app',
    data:{
        content: null,
        loading: true
    },
    mounted(){
        setTimeout(() => {
            this.content= 'Data fetched from external server od database';
            this.loading = false;
        },3000);

        //if you had a data fetching api like axios, set the loading to false in the success callback handler

        axios.get('/api').then( data => {
            console.log(data);
            this.loading = false;
        });
    }
}) 

这是演示小提琴