<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>
黑豹程序员 Vue3 动态创建ElementPlus组件
最新推荐文章于 2024-07-11 09:58:06 发布
本文介绍了如何在Vue应用中使用ref和`<component>`标签实现动态组件切换,展示了如何通过`currentComponent`和`componentProps`管理不同组件(如ElButton和ElInput)的显示状态和属性。
摘要由CSDN通过智能技术生成