vue子组件封装弹框只能执行一次的mounted

封装了一个子组件来处理弹框内容，发现只能执行一次，在父组件添加一个 v-if 即可，当每次弹框关闭的时候销毁掉该组件就没有问题了。

贴一下简易代码：

父组件：

1

2

3

4

5

<add-dialog v-if="addVisible" :dialogVisible="addVisible" @addClose="addClose"></add-dialog>

addClose () {

  this.addVisible = false

}

子组件：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<template>

  <div class="box">

    <el-dialog

      title="提示"

      :visible.sync="dialogVisible"

      :before-close="handleClose">

      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>

      </span>

    </el-dialog>

  </div>

</template>

<script>

export default {

  props: {

    dialogVisible: Boolean

  },

  watch: {

    dialogVisible: function () {

      this.$emit('addClose')

    }

  }

}

</script>

vue mounted方法在什么情况下使用和js定时器使用

在常见的博客中都会这样写到

  • created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  • mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

在实际的开发过程中我们会经常使用create方法，在页面还未渲染成html前，调用函数，从后端获取数据，在实现对页面的数据进行显示。

比如说下面例子

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

created() {

      if(this.$route.params.id)

        this.orderNo=this.$route.params.id

      this.getOrderInfo()

    },

    methods:{

      getOrderInfo(){

        order.getOrderByNum(this.orderNo).then(resp=>{

          this.order=resp.data.data.data

          console.log((this.order))

          //根据订单中的老师id，获取老师姓名

          getDetailTeacher(this.order.teacherName).then(

            resp=>{

              this.teacherName=resp.data.data.teacher.name

              console.log(this.teacherName)

            }

          )

        }).catch(error=>{

        })

      },

我们在什么时候使用mounted方法？

mounted通常是在一些插件的使用或者组件的使用中进行操作 也就是页面渲染之后执行 通常情况下我们会在没有相应的点击事件，但需要在页面展示过程中去不断调用某一函数情况下使用。

比如说在常见的订单支付功能，我们点击立即付款后，跳转到付款页面。

这是时候需要我们不断访问后端接口查看用户是否支付成功，支付成功后进行跳转。

我们需要将查询函数的调用写在mounted函数中，并通过计时器不断调用。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

   mounted() { //页面渲染之后执行,设置为3s一更新

      this.timer1 = setInterval(() => {

        this.queryOrderStatus(this.payObj.out_trade_no)

      }, 3000);

    },

  methods: {

    

      //支付跳转

      queryOrderStatus(orderNo) {

        orderApi.queryPayStatus(orderNo)

          .then(response => {

            if (response.data.success) {

              //支付成功，清除定时器

              clearInterval(this.timer1)

              //提示

              this.$message({

                type: 'success',

                message: '支付成功! 💴'

              })

              //跳转回到课程详情页面

              this.$router.push({

                path: '/course/' + this.payObj.course_id

              })

            }

          })

      }

    }

定时器方法介绍

1

2

3

this.time1=setInterval(()=>{

this.queryPayStatus(this.this.payObj.out_trade_no)

},3000)

setInterval()有两个参数一个是要执行的函数，一个是要执行的时间间隔单位为毫秒，此处函数采用箭头函数

ES5 语法如下

1

setInterval(function(){ alert(“Hello”); }, 3000);

将定时器赋给time 对象

清除定时器 clearInterval(this.time1)

# vue.js # javascript # 前端
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

协同进化：AIGC、Agent和MCP如何相互促进共同发展

avatar MCP技术社区
cover

【CodeBuddy + 自制MCP】给AI装上翅膀，快速绘制思维导图

avatar MCP技术社区

如何将普通HTTP API接口改造为MCP服务器

创建.proto通过本文的四步改造法，你可获得：✅ 配置更新延迟降低90%✅ 网络带宽消耗减少70%✅ 服务端资源占用下降60%✅ 原生支持百万级节点连接升级到MCP不仅是协议转换，更是配置分发模式的架构进化。立即行动，让你的微服务配置管理进入实时推送时代！更多Istio进阶技巧请关注专栏【Service Mesh深度实践】

avatar MCP技术社区