1、vue可视化组件动态渲染（1）

前言

本教程将一步一步引导大家实现一个基本的可视化编辑器，每个章节都是在前一章节的基础上进行，后一章节会比前一章节的功能更加完善，旨在帮助大家理解编辑器的各个组成部分的实现思路。编辑器基于vue3和element-plus。本文简要介绍了vue如何实现动态渲染组件。

---

一、创建项目

1.创建vue3项目

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令：

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: vmagic-editor
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd vmagic-editor
npm install
npm run dev

你现在应该已经运行起来了你的第一个 Vue 项目！

2.安装Element Plus

切换到项目vmagic-editor所在目录，然后在命令行中运行以下命令:

npm install element-plus --save

3.项目中使用Element Plus

完整导入element-plus。

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

二、component动态组件

1.动态组件介绍

component是vue内置组件，主要作用为动态渲染组件，基本用法如下：

<!-- 动态组件由 vm 实例的 `componentName` property 控制 -->
<component :is="componentName"></component>

其中，根据绑定的 is的值决定拿个组件被渲染。

2.动态组件使用

通过动态组件的is属性，可以根据组件的名字或组件对象动态渲染，示例如下：

//App.vue
<script setup>
//1、导入组件
import HelloWorld from './components/HelloWorld.vue';
import { ElButton, ElRadio, ElSwitch } from 'element-plus';
</script>
<template>
    <!--2、通过component组件的is属性动态渲染-->
    <component :is="HelloWorld" msg="这是动态组件渲染的自定义组件"></component>
    <component :is="ElButton">这是动态组件渲染的按钮</component>
</template>

渲染效果，如图:

3.动态组件传值

动态组件的传值遵循基本组件传值规则，除了支持v-bind传值以外，还支持ref引用传值；使用引用传值需要注意的是，需要确定组件之后，再使用ref属性进行传值，否则将会无法获取应用组件的属性。传值语法如下：

<component
    :is="componentName"
    class="your-class"
    :data="propsData"
    :dataA="propsDataA"
    :dataB="propsDataB"
 ></component>

示例代码：

<script setup>
//1、导入组件
import HelloWorld from './components/HelloWorld.vue';
import { ElButton, ElRadio, ElSwitch } from 'element-plus';
</script>
<template>
    <!--2、通过component组件的is属性动态渲染-->
    <component :is="HelloWorld" msg="这是动态组件渲染的自定义组件"></component>
    <component :is="ElButton" type="danger">这是动态组件渲染的按钮</component>
</template>

type为基础组件的属性

渲染效果如下：

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vue3和element-plus的安装使用，以及component动态组件的使用，编辑器组件渲染的核心就是通过动态组件实现动态渲染。

演示代码：https://gitee.com/qinyongcheng/vmagic-editor.git