当前位置: 首页 > news >正文

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

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

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

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

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

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

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

二 动态组件 异步加载
dom中

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

js中

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";
}
}

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

<keep-alive><component :is="mycomponent"></component>
</keep-alive>
http://www.dtcms.com/a/181036.html

相关文章:

  • 【星海随笔】信息安全相关标准
  • Windows下Dify连接Ollama无效
  • 反向沙箱介绍
  • C++ —— 类的嵌套和循环依赖问题
  • KERNEL32!NlsServerInitialize函数分析创建了一个目录对象和目录对象下面的5个对象
  • 【MySQL】-- 事务
  • 华为5.7机考第一题充电桩问题Java代码实现
  • 嵌入式系统架构验证工具:AADL Inspector v1.10 全新升级
  • 优雅草星云智控系统产品发布会前瞻:SNMP协议全设备开启指南-优雅草卓伊凡
  • 代码随想论图论part06冗余连接
  • 【MySQL】存储引擎 - ARCHIVE、BLACKHOLE、MERGE详解
  • 多模型协同预测在风机故障预测的应用(demo)
  • Java设计模式之抽象工厂模式:从入门到精通
  • 服务器配置错误导致SSL/TLS出现安全漏洞,如何进行排查?
  • 在自然语言处理任务中,像 BERT 这样的模型会在输入前自动加上一些特殊token
  • 从概念表达到安全验证:智能驾驶功能迎来系统性规范
  • 金仓数据库永久增量备份技术原理与操作
  • 如何清除windows 远程桌面连接的IP记录
  • 2025年5月通信科技领域周报(4.28-5.4):5G-A技术引领峰会通信 卫星通信加速全球化布局
  • Java socket获取gps定位
  • 【 Triton 教程】triton.heuristics
  • 2025 年数维杯数学建模B题完整论文代码模型
  • Vue 系列之:defineProps、defineEmits、...
  • Linux ifconfig命令详解
  • JavaSE核心知识点02面向对象编程02-03(抽象类与接口)
  • 数据中台建设系列(五):SQL2API驱动的数据共享与服务化实践
  • RAG优化知识库检索(1):基础概念与架构
  • 2025最新精选5款3DMAX建筑可视化插件
  • 【C/C++】为什么要noexcept
  • 不拆机查看电脑硬盘型号的常用方法