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

需求

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;