Vue

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>

发表评论