将组件 赋值给变量li 想拿到 组件的html页面结构 但是 打印出来的是 文件路径 该如何实现呢?

news/2024/9/23 20:15:24/

需求

import { ref } from 'vue';
import refrigerationRight from '@/views/bim3D/components/right/refrigerationRight.vue'
const li=ref({lis:refrigerationRight
})
const refrigerationclick=()=>{console.log(li)
}

##方法

import { createApp } from 'vue';
import refrigerationRight from '@/views/bim3D/components/right/refrigerationRight.vue';// 创建一个独立的 Vue 应用
const app = createApp(refrigerationRight,{ popUpCCTVData: device });// 将组件渲染到虚拟 DOM 中
const vm = app.mount(document.createElement('div'));// 获取组件的 HTML 页面结构
const componentHTML = vm.$el.outerHTML;console.log(componentHTML);## 在组件接收使用
import { defineProps } from 'vue';
// 使用 defineProps 定义 props
const props = defineProps<{popUpCCTVData: any;
}>();
// 在子组件中使用接收到的数据
const receivedModel = props.popUpCCTVData;
// console.logvedModel = props.popUpCCTVData;

http://www.ppmy.cn/news/1430736.html

相关文章

线性表的顺序存储如何设计实现?

如何存储 顺序及链式实现 计算机中的状态

特殊类的设计、C++四种类型转换

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C &#x1f525;座右铭&#xff1a;“不要等到什么都没有了&#xff0c;才下…

双线性插值计算手动实现以及原理

双线性插值计算手动实现以及原理 代码原理 代码 先贴代码吧&#xff0c;原理其实也比较简单&#xff0c;看代码基本也就理解了&#xff0c;时间太晚了&#xff0c;原理后续再补吧。 import torch from torch.nn import functional as F import numpy as np from itertools im…

Rust 模式匹配中的 和 ref

一、Rust & 和 ref 1.Rust的ref有什么用 根据Rust官方文档https://doc.rust-lang.org/std/keyword.ref.html Rust ref 主要用在模式匹配match的所有权问题中。 ref在 Rust中&#xff0c;也是声明一个指针类型变量&#xff0c;进一步说明ref和&在其它方面区别&#xf…

AI重建粒子轨迹,发现新物理学

目录 二Sora冲击还没来&#xff0c;但智能家居人已经开始焦虑了&#xff01; 一、智能家居新革命&#xff1a;AIoH 二、AI技术接入智能家居&#xff0c;未来价值几何&#xff1f; 三、AI 智能家居&#xff0c;不是纸上谈兵 四、结语 电子学在核物理领域从来都不是一帆风顺…

【Linux】权限(shell运行原理、概念,Linux权限)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/qinjh_/category_12625432.html 目录 shell命令以及运行原理 创建和删除用户 创建新普通用户 删除用户 Linux权…

知道做到 一篇总结学习方法的笔记

元数据 [!abstract] 知道做到&#xff1a;跃迁式学习 书名&#xff1a; 知道做到&#xff1a;跃迁式学习作者&#xff1a; 彼得•霍林斯简介&#xff1a; 学习是改善你的生活环境、成为你想成为的人的关键。科学的方法能加速学习进程&#xff0c;让你事半功倍。技能、信息和能力…

Docker搭建NetbootXYZ

NetbootXYZ Docker 镜像功能介绍 NetbootXYZ 是一个开源的 PXE 引导服务器&#xff0c;用于网络引导操作系统安装。它支持多种操作系统的网络安装&#xff0c;如 Ubuntu、Debian、Windows 等。NetbootXYZ 提供了一个 Web 界面来管理网络引导过程&#xff0c;包括设置网络启动选…