問(wèn)題：?jiǎn)雾?yè)面引入的組件頁(yè)面多母赵，多數(shù)首次不顯示的的dom元素，導(dǎo)致進(jìn)入頁(yè)面的時(shí)候加載慢炕檩。
參考的解決文檔： https://blog.csdn.net/z470259742/article/details/79580592
解決：
1吁系、v-if默認(rèn)為false情況下不會(huì)加載組件辕宏，只有變?yōu)閠rue的情況下才會(huì)進(jìn)行加載韭畸，而且我們的組件加載后不需要銷(xiāo)毀（我試過(guò)v-if有時(shí)候很還是會(huì)慢很多）
2宇智、子組件可以通過(guò)插槽對(duì)父組件引用子組件包裹的內(nèi)容進(jìn)行分發(fā)
第二個(gè)解決方法的具體實(shí)現(xiàn)：
說(shuō)明：子組件包含參數(shù)time，作為可設(shè)置的延遲加載時(shí)間胰丁，默認(rèn)為0ms随橘，非必填。
子組件：
<template>
<span>
<slot v-if="initSuccess"></slot>
</span>
</template>
<script>
export default {
name: "pl-lazy",
props: {
time: {
required: false,
default: 0
}
},
data() {
return {
initSuccess: false
}
},
created() {
this.initSlot();
},
methods: {
initSlot() {
setTimeout(()=> {
this.initSuccess = true;
}, (Number(this.time || 0)));
}
}
}
</script>
父組件：
<pl-lazy time="200">
這里放的是延遲加載的組件/dom內(nèi)容
</pl-lazy>
import PlLazy from "./plLazy";
export default {
components: {
PlLazy
},
name: "test-lazy"
}
如果使用的地方比較多的話隘马，那么每個(gè)頁(yè)面都這樣引入有點(diǎn)繁瑣了太防，咱們需要公共引入組件妻顶，這樣我們就可以更方便的使用了酸员，要達(dá)到這個(gè)效果只需要在main.js中引入組件即可:
// 注冊(cè)全局組件
import plLazy from "./components/common/components/plLazy";
Vue.component('pl-lazy', plLazy);
