目录Vue子组件封装弹框只能执行一次的mountedvue mounted方法在什么情况下使用和js定时器使用我们在什么时候使用mounted方法?总结vue子组件封装弹框只能执行一
封装了一个子组件来处理弹框内容,发现只能执行一次,在父组件添加一个 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>
在常见的博客中都会这样写到
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() { //页面渲染之后执行,设置为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)
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue子组件封装弹框只能执行一次的mounted问题及解决
本文链接: https://lsjlt.com/news/198279.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0