vue动态组件

最新推荐文章于 2025-07-11 16:04:01 发布

Ti小芬

最新推荐文章于 2025-07-11 16:04:01 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.csdn.net/sanqianjia/article/details/106413022

vue.js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue.js中如何使用动态组件来展示不同内容。动态组件通过`is`属性结合`component`标签实现，允许在同一个位置切换不同的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态组件

有时候我们希望在一个地方展示不同的组件信息内容，我们就可以使用动态组件。
实现
```
<component is="组件名"></component>
```
is属性的值是组件名， component标签用来渲染这个组件替代自己的位置

代码

<template>
  <div class="tab">
      <div class="tit">
          <span :class="curComName=='Son1' ?'on':''" @click="change(1)">商品介绍</span>
          <span :class="curComName=='Son2' ?'on':''" @click="change(2)">规格与包装</span>
          <span :class="curComName=='Son3' ?'on':''" @click="change(3)">售后包装</span>
          <span :class="curComName=='Son4' ?'on':''" @click="change(4)">商品评价</span>
      </div>
      <div class="content">
          <!-- <template v-if="curIndex==1"><Son1/></template>
          <template v-if="curIndex==2"><Son2/></template>
          <template v-if="curIndex==3"><Son3/></template>
          <template v-if="curIndex==4"><Son4/></template> -->
          <!-- component标签 叫做动态组件标签： is属性指定一个组件的名称，component就显示这个组件的内容 -->
          
            <component :is="curComName"></component>
      </div>
  </div>
</template>

<script>
import Son1 from "./Son1"
import Son2 from "./Son2"
import Son3 from "./Son3"
import Son4 from "./Son4"
export default {
    data(){
        return{
            // curIndex:1
            curComName:"Son1"
        }
    },
    methods:{
        // tab(idx){
        //     this.curIndex = idx;
        // }
        change(name){
            console.log(name)
            this.curComName = "Son"+name
        }
    },
    components:{
        Son1,Son2,Son3,Son4
    }
}

</script>
<style scoped>
.tab{
    background-color: #eee;
    width: 500px;
}
.tab .tit {
    padding:10px;
}
.tab .content{
    padding: 40px;
   border:2px solid blue;
}
.tab .tit span{
    display: inline-block;
    background-color: blue;
    color:#fff;
}
.tab .tit span.on{
    background-color: red;
}
</style>