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

devtools/2024/9/23 1:08:57/

需求

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/devtools/9429.html

相关文章

计算机服务器中了locked勒索病毒怎么办,locked勒索病毒解密工具流程步骤

随着网络技术的不断应用与发展&#xff0c;越来越多的企业离不开网络&#xff0c;网络大大提升了企业的办公效率水平&#xff0c;也为企业的带来快速发展&#xff0c;对于企业来说&#xff0c;网络数据安全成为了大家关心的主要话题。近日&#xff0c;云天数据恢复中心接到多家…

在群晖上安装GPT4Free

什么是 GPT4Free &#xff1f; GPT4Free 简称 G4F&#xff0c;是一个强大的大型语言模型命令行界面&#xff08;LLM-CLI&#xff09;&#xff0c;旨在去中心化并提供免费访问先进人工智能技术的能力。G4F 的目标是通过提供用户友好和高效的工具&#xff0c;使人工智能民主化&am…

工业控制(ICS)---组态软件分析

组态软件 什么是组态软件&#xff1f; 组态软件就是一些数据采集与过程控制的专用软件&#xff0c;它们是在自动控制系统监控层一级的软件平台和开发环境&#xff0c;使用灵活的组态方式&#xff0c;为用户提供快速构建工业自动控制系统监控功能的通用层次的软件工具。 组态软…

lesson03:类和对象(中)续

1.运算符重载 2.const成员函数 3.取地址操作符及const取地址操作符重载 1.运算符重载 1.1运算符重载 c为了增强代码的可读性&#xff0c;引入了运算符重载&#xff0c;运算符重载函数是具有特殊函数名的函数。 函数名&#xff1a;关键字operator后面接需要重载的运算符符号…

代码随想录算法训练营第四十八天| 198.打家劫舍,213.打家劫舍II,337.打家劫舍III

题目与题解 198.打家劫舍 题目链接&#xff1a;198.打家劫舍 代码随想录题解&#xff1a;​​​​​​​198.打家劫舍 视频讲解&#xff1a;动态规划&#xff0c;偷不偷这个房间呢&#xff1f;| LeetCode&#xff1a;198.打家劫舍_哔哩哔哩_bilibili 解题思路&#xff1a; 这道…

GLID: Pre-training a Generalist Encoder-Decoder Vision Model

1 研究目的 现在存在的问题是&#xff1a; 目前&#xff0c;尽管自监督预训练方法&#xff08;如Masked Autoencoder&#xff09;在迁移学习中取得了成功&#xff0c;但对于不同的下游任务&#xff0c;仍需要附加任务特定的子架构&#xff0c;这些特定于任务的子架构很复杂&am…

Lua语言 备查

开发工具 1.SciTE &#xff08;入门级&#xff09; IDEA lua &#xff08;商业级&#xff09; 基础 注释 --单行注释 a "hello" --a是一个标识符号--多行注释 --[[这是多行注释]]--连接符 -- .. str 123..456变量 变量类型可以随意改变 数字开头会报错 五种基本…

自己写的加密案例4——某东方课程头部sign加密

网址&#xff1a;aHR0cHM6Ly9kc2FwaS54ZGYuY24vcHJvZHVjdC92Mi9jbGFzcy9zZWFyY2g 进行抓包分析&#xff0c;发现请求头中由sign加密&#xff0c;简单判断是消息摘要算法。 Sign:d7c68100ca508bb7c8ae284560754303 进行xhr断点&#xff0c;一下子就发现了位置。 s c.sign&…