想被带飞的鱼 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 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分