Vue3动态html和动态vue对象和动态vue组件 vue3

在vue3的单页应用项目(spa)中好像不能创建动态的html并绑定动态的vue对象,于是想了些办法,算是基本实现了效果,可以用于制作打印模板,直接调用浏览器的打印功能或者给lodop这样的web打印插件提供打印模板
在html中如何动态创建vue对象首先看一下在独立的html中如何创建一个动态的vue对象
就是受了这个方法的启发搞出了spa中的动态html加载方法

Element Plus demo {{ message }}

如何在单页面vue3项目中动态创建组件(编译后) 这个方法是捣鼓了两天搞出来 , 如果还有更好的办法请一定留言告诉我
1 利用v-html添加模板

2 在public目录添加一个文件(mountPrintData.js)放全局方法

const mountPrintData = https://www.it610.com/article/function (printData, vhtmlDivId ='print') { clog('mountPrintData') clog(printData) const App = { data() { return { data: printData, } }, } const app = Vue.createApp(App) app.mount('#' + vhtmlDivId) }// 控制台日志,支持传一个参数(对象/字符串), 也支持传两个参数(标志,日志消息<可以是对象,可以是字符串>) const clog = function (flag, value = 'https://www.it610.com/article/xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx') { try { let tmp = '' // 如果value为默认值,则没有传递第二个参数,只处理第一个参数 if (value =https://www.it610.com/article/== `xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx`) { tmp = JSON.stringify(flag) console.log(tmp) } else if (isNull(value)) { tmp = JSON.stringify(flag) console.log(tmp +':') } else if (isNull(flag)) { tmp = JSON.stringify(value) console.log(':' + tmp) } else { tmp = JSON.stringify(value) console.log(flag + ':' + tmp) } return tmp } catch (err) { console.log('log', err) return ' 空对象或者空字符串 ' } }// 判断对象，数组，字符串是否为空，例如:'undefined' , 'null' , '' , '' , {}, [] 全部判断为空 const isNull = function (obj) { if (typeof obj === 'object') { let json = JSON.stringify(obj) if (json === '{}') { return true } if (json === '[]') { return true } return false }let str = String(obj) if (str === 'undefined' || str === 'null' || str === '' || !str || !/[^\s]/.test(str)) { return true }return false }

3 在html.index中引入全局方法和vue.js
因为是在系统运行时动态创建vue对象,所以必须独立引入vue3.js
其中vue3.js可以直接用CDN的方式引入:
生产环境中肯定是要下载后引入的

【Vue3动态html和动态vue对象和动态vue组件】由此实现了运行时动态创建vue对象