Vue page calls method of another page

Due to development needs, I need to call a click event method on the custom component page after the login is successful and the request is successful, so that the method can be executed immediately. After thinking, I came up with a solution, and hereby record it

Page relationship: the login page jumps to the home page, and the home page calls custom components

Page (login page) The main highlight of the login page is here. When the jump is successful, a boolean value is carried to the home page.

  // 开始,请求接口
    async start() {
      const res = await StartExaminationApi({ //此页面为登录页
        data: [],
        s: "200",
      });
    
      if (res.msg == "success") {
        this.$message({
          message: "考试开始,祝您成功!",
          type: "success",
        });
        this.$router.push({ name: "Dashboard", params: { start: true } });
     //登录页的亮点主要就是在这里,在跳转成功的时候,携带一个布尔值到主页去
      }
   
    },
  },

Main page: Called custom component method

<template>
  <div class="box">
    <!-- 使用自定义组件,并添加一个ref-->
    <mySetting ref="mysetting"></mySetting>
 </div>
</template>
<script>
  mounted() {
    if (this.$route.params.start) {
      //判断登录后,点击开始后,是否传布尔值过来,如果布尔值true存在,就调用子组件的方法startCount
      this.$refs["mysetting"].startCount();
    }
  },
</script>

Custom components:

<script> 
 startCount() {
      this.$refs.countdown.countTime();//此为自定义组件方法,需要跳转成功后,立即执行该方法
  
    },
</script>

Guess you like

Origin blog.csdn.net/m0_59023970/article/details/125319882