<template>
<div>
<!-- 動(dòng)態(tài)組件 -->
<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 創(chuàng)建響應(yīng)式引用
const currentComponent = ref('ElButton');
const componentProps = ref({});
// 切換組件的函數(shù)
function switchComponent() {
// 切換組件類型
currentComponent.value = currentComponent.value === 'ElButton' ? 'ElInput' : 'ElButton';
// 你可以在這里設(shè)置不同組件的 props
if (currentComponent.value === 'ElInput') {
componentProps.value = { placeholder: '請(qǐng)輸入內(nèi)容' };
} else {
componentProps.value = {};
}
}
</script>
因篇幅問題不能全部顯示,請(qǐng)點(diǎn)此查看更多更全內(nèi)容
Copyright ? 2019- 91gzw.com 版權(quán)所有 湘ICP備2023023988號(hào)-2
違法及侵權(quán)請(qǐng)聯(lián)系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)