Vue开发学习笔记:使用h()动态渲染ant-design-vue组件

JustWantToFly

已于 2024-07-30 11:15:37 修改

阅读量213

点赞数 3

分类专栏： Vue开发学习笔记文章标签： vue.js Vue3 ant-desing-vue h函数

于 2024-07-30 11:14:23 首次发布

本文链接：https://blog.csdn.net/JustWantToFly/article/details/140791957

版权

Vue开发学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<script setup>
import { h, createApp, onMounted, render } from "vue";
import Antd, { Button, Select, Row, Col } from "ant-design-vue"; // 假设这是Vue 3的兼容版本

// 使用h函数来渲染ant-design-vue的按钮
const renderButton = () => h(Button, { type: "primary" }, "Click me!");
const renderArow = () => h(Row, {}, createCol);
const createCol = () => {
  const colArray = [];
  for (let index = 0; index < 6; index++) {
    colArray.push(h(Col, { span: 4 }, "测试" + index));
  }
  return colArray;
};
onMounted(() => {
  const parentComponent = document.getElementById("renderCustom");
  console.log("🚀 ~ parentComponent:", parentComponent);
  const app = createApp({
    render: renderArow,
  }); // 创建一个临时的 Vue 应用
  app.use(Antd); // 由于临时创建了一个Vue应用因此需要重新引入组件
  app.mount(parentComponent); // 将子组件挂载到目标元素
});
</script>

<!-- 如果你在模板中直接使用 -->
<template>
  <div id="renderCustom"></div>
  <a-row>
    <a-col :span="4">1</a-col>
    <a-col :span="4">2</a-col>
    <a-col :span="4">3</a-col>
    <a-col :span="4">4</a-col>
    <a-col :span="4">5</a-col>
    <a-col :span="4">6</a-col>
  </a-row>
</template>