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

目录
  • vue子组件封装弹框只能执行一次的mounted
  • vue mounted方法在什么情况下使用和js定时器使用
    • 我们在什么时候使用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)

总结

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

(0)

相关推荐

  • 解决vue 中 echart 在子组件中只显示一次的问题

    问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是异步获取的.所以我们在 mounted 生命周期中获取数据.对vue生命周期不熟悉的,可以去看一下我之前写一篇文章vue2.0项目实战(4)生命周期和钩子函数详解 由于父组件请求的数据并不是一成不变的,会根据不同的条件请求不同的数据,此时需要图表进行更新. 代码示例 在父组件中 // Main.vu

  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组

  • 解决父组件将子组件作为弹窗调用只执行一次created的问题

    1.问题原因 因为第一调用渲染子组件后,不再对子组件的created进行调用 2.解决方法 用v-if将子组件包裹起来,因为v-if=false时可以将子组件销毁掉,再次调用时重新渲染 3.上图 初始默认dialogVisible1=false,当执行打开窗口的操作时dialogVisible1为true,当关闭窗口时dialogVisible1=false,从而每一次进入弹窗都会重新渲染整个子组件. 补充知识:vue如何每次打开子组件弹窗都进行初始化 :visible.sync 与 v-if同

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

    目录 vue子组件封装弹框只能执行一次的mounted vue mounted方法在什么情况下使用和js定时器使用 我们在什么时候使用mounted方法? 总结 vue子组件封装弹框只能执行一次的mounted 封装了一个子组件来处理弹框内容,发现只能执行一次,在父组件添加一个 v-if 即可,当每次弹框关闭的时候销毁掉该组件就没有问题了. 贴一下简易代码: 父组件: <add-dialog v-if="addVisible" :dialogVisible="addVi

  • Vue 子组件与数据传递问题及注意事项

    在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题. 如何传递 父组件向子组件在进行传递时,使用的是 prop 特性进行传递. 约定 老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件: 子组件的 props 中定义要传递的变量名 变量名同组件的命名规范 父组件传值时,需要使用 短横线分隔命名 使用 v-bind 进行传值 定义 首先在子组件中定义: // Child.vue expo

  • VUE子组件向父组件传值详解(含传多值及添加额外参数场景)

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • 基于fluttertoast实现封装弹框提示工具类

    目录 提示 实现效果 实现 测试 提示 已将代码上传至gitee,后续会继续更新学习封装的一些组件: flutter练习 实现效果 实现 1.先在pubspec.yaml文件汇总引入fluttertoast的包: fluttertoast: ^8.0.8 # 弹窗 2.封装弹框工具类DialogUtils: import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; /// @a

  • vue子组件通过.sync修饰符修改props属性方式

    目录 子组件通过.sync修饰符修改props属性 子组件修改父组件prop的几种方式 常用方式 取巧方式 子组件通过.sync修饰符修改props属性 在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed

  • Vue 子组件更新props中的属性值问题

    目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况 针对以上几种情况再逐一进行分析 结果展示 结论 Vue子组件更新props的属性值 在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model .sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q

  • vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit('自定义的事件名称',传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></scr

  • vue 子组件向父组件传值方法

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • 解决vue 子组件修改父组件传来的props值报错问题

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result&

随机推荐