vue知识点总结依赖注入动态组件异步加载

春天姐姐2025-05-10 21:31

一依赖注入

使用场景：当需要多层组件需要传值如 祖宗-》父亲-》儿子-》孙子 如祖宗的数据需要直接传给孙子

在祖宗组件中写：

javascript 复制代码

data(){return {}}
provide(){
return {
    shujukey:'数据值'
}
}

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

javascript 复制代码

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

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

javascript 复制代码

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

二动态组件异步加载

dom中

javascript 复制代码

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

js中

javascript 复制代码

import componentA from "./componentA.vue";
// import componentB from "./componentB.vue";
const componentB = defineAsyncComponent(() => import("./componentB.vue"));//异步加载

data(){
	mycomponent:'componentA'
},
methods:{
turntab(){
 this.mycomponent =
        this.mycomponent === "componentA" ? "componentB" : "componentA";
}
}

如在切换组件的过程中不想叫组件销毁，可以使用

保持组件存活

javascript 复制代码

<keep-alive>
    <component :is="mycomponent"></component>
</keep-alive>

vue知识点总结 依赖注入 动态组件 异步加载

vue知识点总结依赖注入动态组件异步加载