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

এ᭄ꦿ十二ঞ

已于 2024-04-22 13:39:35 修改

阅读量277

点赞数 2

文章标签： html 前端 javascript

于 2024-04-17 09:48:51 首次发布

本文链接：https://blog.csdn.net/FANSILVLV/article/details/137858476

版权

需求

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;