vue 之＜component :is=‘name‘/＞动态渲染组件使用详解

一麻袋开心____

已于 2024-02-20 15:04:18 修改

阅读量398

点赞数 2

文章标签： vue.js 前端 javascript

于 2024-02-20 14:55:21 首次发布

本文链接：https://blog.csdn.net/weixin_47373981/article/details/136190332

版权

本文介绍了如何在Vue项目中使用``标签来缓存动态组件的状态，以便在组件切换时保持数据，减少性能消耗。同时展示了如何导入并使用自定义组件进行页面切换。

摘要由CSDN通过智能技术生成

使用vue中的component 实现多个组件来回切换。

<template>
 <div>
        <div id="dynamic-component-demo" class="demo">
  <!-- 为各个按钮设置事件绑定，点击时修改 name 为对应的值（注意 name 的值要用引号包裹起来） -->
            <el-button @click="name='myhome'">首页</el-button>
            <el-button @click="name='news'">新闻</el-button>
            <el-button @click="name='classIfy'">分类</el-button>
            <el-button @click="name='call'">联系</el-button>
           
<!-- 若是数据需要动态渲染，组件切换之后会导致之前获得的数据丢失，这个时候，若我们想要在组件切换过程中保持这些组件的状态，
    以避免重复渲染导致性能问题，则可以在动态组件上使用keep-alive来缓存组件中的数据，代码如下所示： -->
            <keep-alive>
             <!-- :is 已注册组件的名字，或一个组件的选项对象-->
             <!-- :is 其值是将要显示的组件名称-->
                <component :is="name" :data="propsData" :dataA="propsDataA"             
                :dataB="propsDataB" :dataC="propsDataC"></component>
            </keep-alive>
        </div>
    </div>
</template>
<script>
import call from './com/call.vue'
import classIfy from './com/classIfy.vue'
import myhome from './com/myhome.vue'
import news from './com/news.vue'
export default {
    name: 'activeCom',
    components: {
        call, classIfy, myhome, news
    },
    data() {
        return {
            // 定义起初要显示的组件，要用双引号引起来
            name: 'myhome',
            propsData: '这是首页',
            propsDataA: '这是新闻',
            propsDataB: '这是分类',
            propsDataC: '这是联系',
        }
    },
   
   
}
</script>

需要引入的组件，例如：myhome.vue

<template>
    <div>首页--{{ data }}</div>
</template>
<script>
export default{
    name:'myhome',
//这里接受传过来的值
    props:{
        data:{
            type:String
        }
    },
    data(){
        return{

        }
    }
}
</script>