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>