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>