qidao123.com技术社区-IT企服评测·应用市场

标题: vue知识点总结 依赖注入 动态组件 异步加载 [打印本页]

---

作者: 张国伟    时间: 2025-5-10 08:30
标题: vue知识点总结 依赖注入 动态组件 异步加载
一 依赖注入
利用场景：当需要多层组件需要传值 如 祖宗-》父亲-》儿子-》孙子如祖宗的数据需要直接传给孙子
在祖宗组件中写：

1. data(){return {}}
2. provide(){
3. return {
4.     shujukey:'数据值'
5. }
6. }

复制代码

在孙子组件中吸收,模板代码中直接利用{{shujukey}}获取数据

1. data(){return {}}
2. inject:['shujukey']

复制代码

假如想全局利用某个依赖数据，需要在main.js中修改代码createApp(App).mount('#app')为

1. const app=createApp(App);
2. app.provide('zuzongName','zuzongvalue')
3. app.mount('#app')

复制代码

二 动态组件 异步加载
dom中

1. <component :is="mycomponent"></component>
2. <button @click="turntab">切换组件</button>

复制代码

js中

1. import componentA from "./componentA.vue";
2. // import componentB from "./componentB.vue";
3. const componentB = defineAsyncComponent(() => import("./componentB.vue"));//异步加载
5. data(){
6.         mycomponent:'componentA'
7. },
8. methods:{
9. turntab(){
10. this.mycomponent =
11.         this.mycomponent === "componentA" ? "componentB" : "componentA";
12. }
13. }

复制代码

如在切换组件的过程中不想叫组件销毁，可以利用
保持组件存活

1. <keep-alive>
2.     <component :is="mycomponent"></component>
3. </keep-alive>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4