VUE3之Component（三）

动态组件的基本使用

根据一个属性currentTab来决定当前显示的组件，可以使用template的v-if来完成：

        <template v-if="currentTab==='home'">
            <div>
                <home/>
            </div>
        </template>
        <template v-else-if="currentTab==='about'">
            <div>
                <about/>
            </div>
        </template>
        <template v-else>
            <div>
                <category/>
            </div>
        </template>

也可以使用动态组件完成。动态组件是component标签，有一个属性is，用于决定当前动态显示的组件：

<component :is="currentTab"></component>

is属性后面的内容必须是：is属性需要的内容：component函数全局注册的组件；或当前app的components局部注册的组件。

动态组件的传递参数

动态组件的传递参数和普通组件类似，同样是在组件内部定义props表明需要使用的参数，定义emits表明需要触发的事件；在动态组件中用同样的方式传入参数与回调的方法。

// Home.vue
<template>
    <div @click="divClick">
        Home 组件 {{name}} - {{age}}
    </div>
</template>

<script>
    export default {
        props:{
            name:{
                type:String,
                default:""
            },
            age:{
                type:Number,
                default:0
            }
        },
        emits:["pageClick"],
        methods: {
            divClick(){
                this.$emit("pageClick");
            }
        },
    }
</script>

// App.vue
        <component :is="currentTab"
            name="sk"
            :age="18"
            @pageClick="pageClick"></component>