黑豹程序员 Vue3 动态创建ElementPlus组件

<template>
  <div>
    <!-- 动态组件 -->
    <component :is="currentComponent" v-bind="componentProps"></component>
    <!-- 按钮用于切换组件 -->
    <el-button @click="switchComponent">切换组件</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElButton, ElInput } from 'element-plus';

// 使用 ref 创建响应式引用
const currentComponent = ref('ElButton');
const componentProps = ref({});

// 切换组件的函数
function switchComponent() {
  // 切换组件类型
  currentComponent.value = currentComponent.value === 'ElButton' ? 'ElInput' : 'ElButton';

  // 你可以在这里设置不同组件的 props
  if (currentComponent.value === 'ElInput') {
    componentProps.value = { placeholder: '请输入内容' };
  } else {
    componentProps.value = {};
  }
}
</script>