vue子组件封装弹框只能执行一次的mounted问题及解决

 更新时间:2023年03月02日 14:53:43   作者:给你六圆钱  
这篇文章主要介绍了vue子组件封装弹框只能执行一次的mounted问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

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

贴一下简易代码:

父组件:

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

addClose () {
  this.addVisible = false
}

子组件:

<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前,调用函数,从后端获取数据,在实现对页面的数据进行显示。

比如说下面例子

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函数中,并通过计时器不断调用。

   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
              })
            }
          })
      }
    }

定时器方法介绍

this.time1=setInterval(()=>{
this.queryPayStatus(this.this.payObj.out_trade_no)
},3000)

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

ES5 语法如下

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

将定时器赋给time 对象

清除定时器 clearInterval(this.time1)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    这篇文章主要介绍了Vue+ECharts实现中国地图的绘制以及拖动、缩放和各省份自动轮播高亮显示,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • vue中v-model、v-bind和v-on三大指令的区别详解

    vue中v-model、v-bind和v-on三大指令的区别详解

    v-model和v-bind都是数据绑定的方式,下面这篇文章主要给大家介绍了关于vue中v-model、v-bind和v-on三大指令的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 浅析vue中的provide / inject 有什么用处

    浅析vue中的provide / inject 有什么用处

    这篇文章主要介绍了vue中的provide / inject 有什么用处,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue中rem的配置的方法示例

    vue中rem的配置的方法示例

    这篇文章主要介绍了vue中rem的配置的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue2异步更新及nextTick原理详解

    Vue2异步更新及nextTick原理详解

    Vue2的异步更新机制是基于JavaScript的事件循环机制实现的。nextTick方法则是在DOM更新后执行回调函数。本文详细介绍了Vue2的异步更新机制和nextTick原理,对于理解Vue2的渲染机制和优化性能有很大的帮助。
    2023-04-04
  • vue2 vue3中使用Echarts详细

    vue2 vue3中使用Echarts详细

    这篇文章主要给大家介绍的是vue2 vue3中使用Echarts的相关资料,下面文章 会详细介绍该内容,感兴趣的小伙伴不要错过哟
    2021-09-09
  • 详解nuxt路由鉴权(express模板)

    详解nuxt路由鉴权(express模板)

    这篇文章主要介绍了详解nuxt路由鉴权(express模板),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue3 跨域配置devServer的参数和设置方法

    Vue3 跨域配置devServer的参数和设置方法

    这篇文章主要介绍了Vue3 跨域配置devServer的参数和设置,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue如何实现observer和watcher源码解析

    vue如何实现observer和watcher源码解析

    这篇文章主要为大家详细介绍了vue如何实现observer和watcher源码的相关资料,分析vue的observe实现源码,聊聊如何一步一步实现$watch,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 基于el-table实现行内增删改功能

    基于el-table实现行内增删改功能

    这篇文章主要介绍了基于el-table实现行内增删改功能,用过通过操作按钮点击删除或者编辑功能即可实现相应的效果,下面小编给大家分享实例代码感兴趣的朋友跟随小编一起看看吧
    2024-04-04

最新评论