Отображение загрузчика для асинхронных компонентов Vue 2

Question

У меня довольно тяжелый компонент, который я хотел бы загружать асинхронно, и одновременно показывать пользователю загрузчик при загрузке.

Это моя первая попытка, используя loading, определенную в data, связанную с компонентом счетчика с помощью v-if="loading". К сожалению, это не работает, потому что кажется, что Vue не перепривязывают this должным образом для функций внутри components -

export default { 
    data: { 
    return { 
     loading: false, 
    }; 
    }, 

    components: { 
    // ... 
    ExampleComponent: (resolve) => { 
     // Doesn't work - 'this' is undefined here 
     this.loading = true; 
     require(['./ExampleComponent'], (component) => { 
     this.loading = false; 
     resolve(component); 
     }); 
    }, 
    }, 
}; 

Я также нашел некоторые Vue 1.0 примеры, но они зависели от $refs - в 2,0 $refs нет более реактивны и не могут быть использованы для этого. Единственный путь, по которому левый компонент сам должен что-то сделать на своем жизненном цикле на этапе установки, чтобы состояние данных приложения удалило загрузчик, но это немного тяжело. Есть лучший способ сделать это?

Answer 1

Вы можете объявить переменную за пределами области действия объекта (но все еще в пределах области модуля), а затем использовать крюк created для подключения this. Таким образом, ваш обновленный код будет выглядеть так:

let vm = {} 

export default { 
    // add this hook 
    created() { 
    vm = this; 
    }, 

    data: { 
    return { 
     loading: false, 
    }; 
    }, 

    components: { 
    // ... 
    ExampleComponent: (resolve) => { 
     // since 'this' doesn't work, we reference outside 'vm' 
     vm.loading = true; 
     require(['./ExampleComponent'], (component) => { 
     vm.loading = false; 
     resolve(component); 
     }); 
    }, 
    }, 
};