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

在vue3的单页应用项目(spa)中好像不能创建动态的html并绑定动态的vue对象,于是想了些办法,算是基本实现了效果,可以用于制作打印模板,直接调用浏览器的打印功能或者给lodop这样的web打印插件提供打印模板

在html中如何动态创建vue对象

首先看一下在独立的html中如何创建一个动态的vue对象
就是受了这个方法的启发搞出了spa中的动态html加载方法

  
    
    
    
    
    
    
    
    
    
  

  
    

      开始
      {{ message }}
      
    
    
  

如何在单页面vue3项目中动态创建组件(编译后)

这个方法是捣鼓了两天搞出来 , 如果还有更好的办法请一定留言告诉我

1 利用v-html添加模板

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

const mountPrintData = 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 = 'xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx') {
  try {
    let tmp = ''
    // 如果value为默认值,则没有传递第二个参数,只处理第一个参数
    if (value === `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的方式引入:
生产环境中肯定是要下载后引入的

由此实现了运行时动态创建vue对象