想被带飞的鱼 2022-09-01 11:01 采纳率: 71.4%
浏览 48
已结题

如何在tabs标签页判断属于哪个标签页的值并传递给父组件

(标签页的数据二选一)在tabs标签页下的两个标签,我通过自定义函数来获取标签页下组件的内容;我需要把在哪个标签页下对应的内容传给父组件;但是遇到的问题就是我监听activeName的变化判断当前是哪个标签页,但是标签页是监听到了,但是她下面的内容我必须通过切换了才能获取到数据(我标签页的组件也是改变一个就传上来的数据,但是默认的时候监听不知道在监听activeName的时候那个获取到组件的内容如何同步监听到然后传到父组件去),所以我在默认停在当前标签页的时候,传递过去的数据是空的,我必须切换一下标签页数据才能准确的传递到父组件上去;

其实我想要的效果是获取这个标签页对应的数据然后传递给父组件,但是没想到其他方法;就用的这个方法;各位朋友能有什么简便的方法吗?或者是我这个方法可行然后帮帮我解决这个问题

讲的是有点混乱,各位朋友哪没明白就直接问,我秒回;

表格的标签页
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="装备数据" name="first">
          <equList v-bind="$attrs" v-on="$listeners" @firstBind="firstBind" />
        </el-tab-pane>
        <el-tab-pane label="手动填写" name="second">
          <equListManual
            v-bind="$attrs"
            v-on="$listeners"
            @secondBind="secondBind"
          />
        </el-tab-pane>
      </el-tabs>

进行的操作判断传值
export default {
  components: {
    equList,
    equListManual,
  },
  props: {},
  watch: {},
  data() {
    return {
      workplanId: "",
      activeName: "first",
    };
  },
  watch: {
    //监听判断内容属于哪个标签页进行传值
    activeName: {
      handler(val) {
        console.log(
          "tab标签的切换值",
          val,
          this.taskJournalProcessfirst,
          this.taskJournalProcesssecond
        );
        if (val == "first") {
          this.$emit("todo", this.taskJournalProcessfirst);
        } else {
          this.$emit("todo", this.taskJournalProcesssecond);
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    //切换改变activeName的值
    handleClick(val) {
      this.activeName = val.name;
    },
    //第一个标签页的值
    firstBind(val) {
      this.taskJournalProcessfirst = val;
    },
    //获取第二个标签页的值
    secondBind(val) {
      this.taskJournalProcesssecond = val;
    },
  },
};

  • 写回答

2条回答 默认 最新

  • 接着奏乐吧 2022-09-01 17:59
    关注
     
     //第一个标签页的值
        firstBind(val) {
          this.taskJournalProcessfirst = val;
          if(this.activeName == "first"){
           this.$emit("todo", this.taskJournalProcessfirst)
          }
      },
    //获取第二个标签页的值
        secondBind(val) {
            this.taskJournalProcesssecond = val;
            if(this.activeName == "second"){
            this.$emit("todo", this.taskJournalProcesssecond);
            }
       },
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 9月7日
  • 已采纳回答 9月3日
  • 创建了问题 9月1日

悬赏问题

  • ¥15 抖音咸鱼付款链接转码支付宝
  • ¥15 ubuntu22.04上安装ursim-3.15.8.106339遇到的问题
  • ¥15 求螺旋焊缝的图像处理
  • ¥15 blast算法(相关搜索:数据库)
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛?
  • ¥15 网络通信安全解决方案
  • ¥50 yalmip+Gurobi
  • ¥20 win10修改放大文本以及缩放与布局后蓝屏无法正常进入桌面
  • ¥15 itunes恢复数据最后一步发生错误
  • ¥15 关于#windows#的问题:2024年5月15日的win11更新后资源管理器没有地址栏了顶部的地址栏和文件搜索都消失了