Vue_01之實現Element標籤頁的動態切換及資料傳遞

• 1 使用場景
• 2 需要知識
• 3 演示
• 3.1 單元件標籤頁的跳轉
• 3.1 父元件和子元件聯動

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>