网站宣传与推广,建设大型网站设计公司,做网站打算套用模板,学做网站好吗defineAsyncComponent 函数#xff1a;异步引入组件。
Suspense 标签#xff1a;异步引入组件时#xff0c;显示默认的内容。 异步引入组件的基本使用#xff1a; 异步引入组件#xff1a;
import { defineAsyncComponent } from vue;
const Child defineAsyncComponen…defineAsyncComponent 函数异步引入组件。
Suspense 标签异步引入组件时显示默认的内容。 异步引入组件的基本使用 异步引入组件
import { defineAsyncComponent } from vue;
const Child defineAsyncComponent(() {return import(../components/Child.vue);
});
设置组件默认显示的内容
Suspense!-- 如果组件加载成功就显示 default 中的内容 --template v-slot:defaultChild/Child/template!-- 如果组件正在加载中就显示 fallback 中的内容 --template v-slot:fallbackh3加载中请稍等.../h3/template
/Suspense
注Suspense 标签中有两个插槽 default 和 fallback插槽名是固定的不能随意更改。 异步引入组件的作用
创建 Child 子组件
templatediv classchildh3我是Child组件子组件/h3/div
/templatescript
export default {name: Child
}
/script
style scoped
.child {background-color: red;padding: 10px;
}
/style 创建 Parent 父组件通过静态引入的方式使用 Child 组件。
templatediv classparenth3我是Parent组件父组件/h3Child/Child/div
/templatescript
// 静态引入【同步引入】
import Child from ../components/Child;
export default {name: Parent,components: { Child }
}
/scriptstyle scoped
.parent {background-color: aqua;padding: 10px;
}
/style
注在控制台的 Network 中将网络调成 Slow 3G慢的 3G 网络。刷新页面后我们会发现父组件和子组件是一起显示的。 注假如子组件中的数据量特别大那么静态引入时也会导致父组件延迟显示。
修改 Parent 父组件通过异步引入的方式使用 Child 组件。
templatediv classparenth3我是Parent组件父组件/h3Child/Child/div
/templatescript
// 引入 defineAsyncComponent 函数
import { defineAsyncComponent } from vue;
// 动态引入【异步引入】
const Child defineAsyncComponent(() {return import(../components/Child.vue);
});
export default {name: Parent,components: { Child }
}
/scriptstyle scoped
.parent {background-color: aqua;padding: 10px;
}
/style
注同样调成 Slow 3G 网络我们会发现父组件显示出来之后子组件才显示。 原创作者吴小糖
创作时间2023.10.27