Vue_01之实现Element标签页的动态切换

1 使用场景

  • 在Vue项目中使用Element标签页,并且在一个标签页中点击文字或者按钮实现跳转到其他标签页中
  • 父组件与子组件嵌套,在子组件中点击,在父组件中实现跳转.
  • 子组件向父组件传递数据,并且将数据传递到其他子组件,并且重新刷新这个被传递数据的子组件.

2 需要知识

  • 需要知道Vue的父组件与子组件之间的消息传递,主要是子组件向父组件传递数据.
  • 会使用Element标签页
  • Vue的基础知识

3 演示

3.1 单组件标签页的跳转

<template>
    <el-container>
        <el-tabs v-model="activeName">
        <el-tab-pane  label="用户管理" name="first">
          <h1>用户管理界面</h1>
          <el-button type="primary" @click="switchTab">角色管理</el-button>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <h1>配置管理</h1>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="third">
          <h1>角色管理</h1>
        </el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">
          <h1>定时任务补偿</h1>
        </el-tab-pane>
        </el-tabs>
    </el-container>
</template>

<script>
    export default {
      data() {
        return {
          activeName : 'first'
        }
      },
      methods: {
        switchTab() {
          // 这里写你要跳转的标签页的name
          this.activeName = "third"
        }
      }
    }
</script>

<style>

</style>

3.1 父组件和子组件联动

在这里插入图片描述

  • 标签页在父组件中

  • 标签页中包含子组件

  • 某一个的标签页(用户管理)中的子组件向父组件传递数据

  • 父组件接收到该数据并把数据传递到另一个标签页中的子组件中

  • 刷新该标签页的子组件,跳转到该标签页.

  • 父组件

<template>
  <el-container class="container_home">
    <el-tabs v-model="activeName">
      <el-tab-pane  label="用户管理" name="first">
        <h1>用户管理界面</h1>
        <!-- 监听方法-->
        <tabs v-on:listenToChildEvent="switchTab"></tabs>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <h1>配置管理</h1>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third">
        <h1>角色管理</h1>
        <tabs :data="data"></tabs>
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">
        <h1>定时任务补偿</h1>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
import tabs from '../module/tabs'
    export default {
      components: {
        tabs
      },
      data() {
        return {
          activeName : 'first',
          // 销毁,渲染子组件
          reset: false,
          // 子组件传递的数据
          data: ''
        }
      },
      methods: {
        switchTab(data) {
          // 这里写你要跳转的标签页的name
          this.activeName = "third"
          this.data = data;
          this.$alert(data)
          //this.resetZuJian()
        },
        resetZuJian() {
          this.reset = false // 销毁组件
          this.$nextTick(() => {
            this.reset = true //重建组件
          })
        }
      }
    }
</script>

<style>
</style>

  • 子组件
<template>
    <el-container>
      <el-button type="primary" @click="switchTab('返回的数据: 角色ID')">角色管理</el-button>
      <h1>接受的数据: {{data}}</h1>
    </el-container>
</template>

<script>
    export default {
      // 接受父组件传递的数据
      props: ['data'],
      methods: {
        switchTab(mesg) {
          // 这里把返回的数据写死了,实际数据是动态的
          this.$emit('listenToChildEvent',mesg)
        }
      }
    }
</script>

<style>

</style>

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值