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

包达叔

已于 2022-04-24 23:54:15 修改

阅读量5.7k

点赞数 2

文章标签： vue3

于 2022-04-19 11:48:07 首次发布

本文链接：https://blog.csdn.net/zheyiw/article/details/124269735

版权

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

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

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

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- 导入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
    <!-- 导入 Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- 导入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
    <title>Element Plus demo</title>
  </head>

  <body>
    <div id="app">
      <button onclick="abc()">开始</button>
      <el-button @click="createComponent">{{ message }}</el-button>
      <component :is="componentName"></component>
    </div>
    <script>
      const App = {
        methods: {
          //根据数据源和打印模板创建打印组件
          createComponent: function () {
            console.log("createComponent");
            //创建组件
            app.component("myc", {
              template: "<div>myComponent</div>", //打印模板
            });

            //更新组件
            this.componentName = "myc"; //显示打印组件
          },
        },
        data() {
          return {
            componentName: "",
            message: " Hello Element Plus",
          };
        },
      };

      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>

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

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

1 利用v-html添加模板

<template>
  <h1>print demo</h1>
  <h3>先定义一个id="print"的v-html,把打印模板绑定到它上面</h3>
  <h3>再调用全局方法 mountPrintData(printJsonData) 把json数据源传传入即可</h3>
  <h3>mountPrintData会创建出vue对象,绑定到v-html上,渲染打印模板</h3>
  <button @click="doMount">动态创建vue对象</button>
  <div id="print" v-html="printHtml" style="border: 1px red solid"></div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";

//更新模板
const doMount = () => {
  printHtml.value = "<div></div>"; //触发printHtml.value的变更,否则无法还原模板
  nextTick(() => {
    printHtml.value = printTemplate; //还原模板
    nextTick(() => {
      updateData();
    });
  });
};

//更新数据
const updateData = () => {
  let count = Math.random() * 10; //模拟数据源变更
  let printJsonData = {
    abc: "abc:" + count,
    vif: true,
    list: [
      { name: "baozi1" },
      { name: "baozi2" },
      { name: "baozi3" },
      { name: "baozi4" },
      { name: "baozi5" },
      { name: "baozi6" },
    ],
  };
  mountPrintData(printJsonData);
};

let printTemplate = `
<div>
  <div>{{ data.abc }}</div>
  <div v-if="data.vif">v-if-true</div>
  <div v-if="false">v-if-false</div>
  <div v-for="item in data.list">{{item.name}}</div>
</div>`;
const printHtml = ref(printTemplate);
</script>

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的方式引入:
生产环境中肯定是要下载后引入的

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script type="text/javascript" src="vue3.js"></script>
    <script type="text/javascript" src="mountPrintData.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

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

包达叔

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Vue3动态html和动态vue对象和动态vue组件

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

扫一扫