element-plus中tabs切换

 tabs切换+父子组件传值监听并重新调用接口

//老爸

<template>

<el-tabs type="border-card"  @tab-click="handleClick" v-model="activeName">

  <el-tab-pane label="在用部门" name="first">

  <!-- 在用 -->

  <dept-now-switch :deleteNow="deleteNow"></dept-now-switch>

  </el-tab-pane>

  <el-tab-pane label="已删除部门" name="second">

  <!-- 已删除 -->

  <dept-delete-switch :deleteSwitch="deleteSwitch"></dept-delete-switch>

  </el-tab-pane>

</el-tabs>

</template>



<script lang="ts" setup>

import { ref } from 'vue'  //ref用于定义基本类型和应用类型，ref定义数据使用时需加.value

import DeptNowSwitch from "./deptNowSwitch.vue";

import DeptDeleteSwitch from "./deptDeleteSwitch.vue";

import type { TabsPaneContext } from 'element-plus'   //引入封装的tabs组件



//定义所传值为字符串类型

let deleteSwitch=ref<string>()

let deleteNow=ref<string>()



//双向数据绑定，默认显示在用子组件

const activeName = ref('first')



//tabs切换时的点击事件

const handleClick = (tab: TabsPaneContext, event: Event) => {

//传值到子组件进行监听，从而在子组件里再次调用接口

  if (tab.paneName=="second") {

    deleteSwitch.value="second"

    deleteNow.value="second"

  }else{

     deleteNow.value="first"

     deleteSwitch.value="first"

}

}

</script>



//儿子

<script lang="ts" setup>

import { reactive, ref, toRefs, watch } from "vue";

import useView from "@/hooks/useView";    //接口调用数据列表增删改查封装组件



//接受老爸给的值并定义

const props = defineProps({

  deleteNow:String

})

//输入初始接口地址

const view = reactive({

  getDataListURL: "/sys/dept/list",

  deleteURL: "/sys/dept"

});

//利用reactive进行转换并使state能够使用useView和toRefs中的所有方法

const state = reactive({ ...useView(view), ...toRefs(view) });

//监听

watch(props,(nValue,oldValue)=>{

       if (nValue.deleteNow=="first") {

    //再次调用接口

           state.getDataList()

       }

})


</script>