Vue component用法

最新推荐文章于 2024-01-27 17:27:48 发布

wei_dan1129

最新推荐文章于 2024-01-27 17:27:48 发布

阅读量418

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wei_dan1129/article/details/125505103

版权

<template>
    <div class="index-wrap">
    	<!--
        	根据currentShow  的返回值来展示对应的模板
        -->
        <component v-if="currentShow !== ''" :is="componentMuster[currentShow]"></component>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, computed, watch } from 'vue';
import Test1 from '@/components/homePage/Test1.vue';
import Test2 from '@/components/homePage/Test2.vue';
import Test3 from '@/components/homePage/Test3/index.vue';
import Test4 from '@/components/homePage/Test4/Index.vue';
import Test5 from '@/components/homePage/Test5/Index.vue';

export default defineComponent({
    setup() {

        const state = reactive({
            currentShow: '',
        });

        const componentMuster = reactive({
            UI1: Test1,
            UI2: Test2,
            UI3: Test3,
            UI4: Test4,
            UI5: Test5,
        });
	
		const getData = () => {
            config({})
                .then((res: any) => {
                    state.currentShow = res.data.tempCode;
                    //返回UI1 就展示Test1模板
                })
                .catch(err => {
                    debug.error(31, err);
                });
        };
		
		getData();

        return {
            ...toRefs(state),
            componentMuster,
        };
    },
    components: {
        Test1,
        Test2,
        Test3,
        Test4,
        Test5,
    },
});