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

一 依赖注入

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

祖宗组件中写:

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>
相关推荐
布列瑟农的星空14 分钟前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
山有木兮木有枝_17 分钟前
node文章生成器
javascript·node.js
yvvvy33 分钟前
前端必懂的 Cache 缓存机制详解
前端
北海几经夏1 小时前
React自定义Hook
前端·react.js
龙在天1 小时前
从代码到屏幕,浏览器渲染网页做了什么❓
前端
TimelessHaze1 小时前
【performance面试考点】让面试官眼前一亮的performance性能优化
前端·性能优化·trae
yes or ok1 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手1 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
Noxi_lumors2 小时前
VITE BALABALA require balabla not supported
前端·vite
周胜22 小时前
node-sass
前端