Vue组件之间相互替换

最新推荐文章于 2024-11-08 20:19:08 发布

原创最新推荐文章于 2024-11-08 20:19:08 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

私人学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在前端开发中实现部分网页区域组件动态切换的方法，通过使用Vue.js的动态组件特性，结合导航抽屉和顶部栏，实现了不同组件间的平滑过渡。此方法适用于需要在网页中快速切换展示内容的场景。

简介

用于网页部分区域组建之间的相互替换。

前端代码

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
      left
    >
      <v-list dense>
        <v-list-item @click='DAB'>
          <v-list-item-action>
            <v-icon >mdi-home</v-icon>
          </v-list-item-action>

          <v-list-item-content>
            <v-list-item-title>DAB</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item @click='PAB'>
          <v-list-item-action>
            <v-icon>mdi-email</v-icon>
          </v-list-item-action>

          <v-list-item-content>
            <v-list-item-title>PAB</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    
<!-- bar设置 -->
    <v-app-bar
      app
      color="cyan"
      dark
    >
      <v-toolbar-title>Autoliv ESR Submit</v-toolbar-title>

      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>
<!-- 操作区域 -->
    <v-main fluid>
    <!-- <appmain/> -->
    <component :is="currentvue"></component>  //绑定对应的组建区域
    </v-main>
<!-- footer设置 -->
    <v-footer
    color="cyan"
    padless
  >
    <v-row
      justify="center"
      no-gutters
    >
      <v-btn
        v-for="link in links"
        :key="link"
        color="white"
        text
        rounded
        class="my-2"
      >
        {{ link }}
      </v-btn>
      <v-col
        class="cyan lighten-1 py-4 text-center white--text"
        cols="12"
      >
        {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
      </v-col>
    </v-row>
  </v-footer>
  </v-app>
</template>

<script>
  export default {
    name: 'Layout',

    components:{
        Stepper: () => import('@/components/Stepper'),    //载入对应的组件
        ProjectTable: () => import('@/components/ProjectTable'),
    },
    props: {
      source: String,
    },
    data: () => ({
      currentvue:'',
      drawer: null,
      links: [
        'Home',
        'About Us',
        'Team',
        'Services',
        'Contact Us',
      ],
    }),
    methods:{
      DAB(){
         this.currentvue = 'Stepper'; // 载入不同的部件
         },
      PAB(){
         this.currentvue = 'ProjectTable';  // 载入不同的部件
      }
    }
  }
</script>

关键代码

<component :is="currentvue"></component>  //绑定对应的组建区域

参考

[1]组件3 —— 动态组件(组件替换)