Vue3-41-组件- 动态组件 component 标签和 is 属性的使用

news2024/12/24 11:42:58

说明

<component> 标签有一个 is 属性，
可以给这个 is属性赋值为一个组件对象，
这样这个<component> 标签就可以渲染指定的组件对象了。

使用案例

本案例中会准备两个简单的组件，
在 App.vue 中导入这两个组件，并使用 <component> 标签进行动态的渲染。
下面的代码中将只展示 App.vue 的内容。

App.vue 的内容

<template>

    <div class="basediv">
      
        APP.vue 中的 msg : {{ msg }}

        <template v-for="item in componentList">
            <component :is="item.component"></component>
        </template>

    </div>
    
</template>
    
<script setup lang="ts">

	// 引入 provide 方法
    import { ref } from 'vue'
    // 声明父组件的一个变量
    const msg = ref('这是App根组件的msg变量')

    // 引入两个组件
    import componentA from './componentA.vue';
    import componentB from './componentB.vue';

    const componentList = [
        {cname:'ac',component:componentA},
        {cname:'bc',component:componentB}
    ]

</script>
    
<style scoped>

    .basediv{
        width: 600px;
        height: 400px;
        border: 1px solid red;
    }
</style>