切换导航，显示内容改变（非路由跳转）

最新推荐文章于 2024-04-27 11:33:07 发布

Mr_zrh

最新推荐文章于 2024-04-27 11:33:07 发布

阅读量244

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Mr_zrh/article/details/116781587

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<template>
  <div>

    <button @click="show('my-header')">显示头部</button>
    <button @click="show('my-center')">显示中间</button>
    <button @click="show('my-footer')">显示底部</button>
   
   <!-- 可以控制下面缓存的数量 -->
    <keep-alive>    
          <!-- 占位符 控制显示的东西，必须加is 不然会报错 -->
       <component :is="isshow"></component>
          
    </keep-alive>
  </div>


</template>

<script>
 //      随便起的名字与下面的components一致   后面为路径
import  header   from   "@/views/aaaaa/Header.vue"
import  center   from   "@/views/aaaaa/center.vue"
import  footer   from   "@/views/aaaaa/footer.vue"

export default {
// 引入文件 必须现在components 里面
  components: {
       "my-header" : header,
       "my-center" : center,
       "my-footer" : footer,
  },
  data() {
    return {
        isshow : "my-header"
    };
  },
  mounted() {
    
  },

  methods: {
      show(name){
        this.isshow = name
      }
  
  },
};
</script>

<style   scoped>

</style>