vue3 tab切换父子传参，参数无法获取的问题

今天在做原系统vue2里面迁移到vue3的工作中，发现一个tab切换时，引用同一个子组件的时候无法获取父子传参的参数问题。

下面我们来还原一下场景和解决方案。在此还是感谢小伙伴们的阅读、关注、点赞、转发。

一、父级页面代码

<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> </el-tabs> <sub :active="activeName" v-if="activeName == 'first' || activeName == 'fourth'"></sub> </template> <script> import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs } from 'vue' import sub './sub.vue' export default defineComponent({ components: { sub, }, setup(){ const state = reactive({ activeName: 'first' }) }, const handleClick = () => { }, return { ...toRefs(state), handleClick, } }) </script>

二、子级页面代码

当使用以下代码时，操作两个Tab标签引用同一组件的情况，在选择first/fourth时，父级只会往子级传当一个选中的tab标签值，如选择first后，再去选择fourth时，子页面就无法获取到fourth的值。

<template> {{active}} </template> <script> import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs } from 'vue' export default defineComponent({ props: { active: { type: String, default: '', }, setup(props){ }, return { ...toRefs(state), } }) </script>

三、解决处理方法

<template> {{active}} </template> <script> import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, watch } from 'vue' export default defineComponent({ props: { active: { type: String, default: '', }, setup(props){ }, watch (props,(val)=> { console.log(val.active) }) return { ...toRefs(state), } }) </script>

[注：本文部分图片来自互联网！未经授权，不得转载！每天跟着我们读更多的书]

互推传媒文章转载自第三方或本站原创生产，如需转载，请联系版权方授权，如有内容如侵犯了你的权益，请联系我们进行删除！

如若转载，请注明出处：http://www.hfwlcm.com/info/74134.html