vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
vue子組件封裝彈框只能執(zhí)行一次的mounted
封裝了一個(gè)子組件來處理彈框內(nèi)容，發(fā)現(xiàn)只能執(zhí)行一次，在父組件添加一個(gè) v-if 即可，當(dāng)每次彈框關(guān)閉的時(shí)候銷毀掉該組件就沒有問題了。
貼一下簡易代碼：
父組件：
<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定時(shí)器使用
在常見的博客中都會這樣寫到
created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。
在實(shí)際的開發(fā)過程中我們會經(jīng)常使用create方法，在頁面還未渲染成html前，調(diào)用函數(shù)，從后端獲取數(shù)據(jù)，在實(shí)現(xiàn)對頁面的數(shù)據(jù)進(jìn)行顯示。
比如說下面例子
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))
? ? ? ? ? //根據(jù)訂單中的老師id，獲取老師姓名
? ? ? ? ? getDetailTeacher(this.order.teacherName).then(
? ? ? ? ? ? resp=>{
? ? ? ? ? ? ? this.teacherName=resp.data.data.teacher.name
? ? ? ? ? ? ? console.log(this.teacherName)
? ? ? ? ? ? }
? ? ? ? ? )
? ? ? ? }).catch(error=>{
? ? ? ? })
? ? ? },我們在什么時(shí)候使用mounted方法？
mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作 也就是頁面渲染之后執(zhí)行 通常情況下我們會在沒有相應(yīng)的點(diǎn)擊事件，但需要在頁面展示過程中去不斷調(diào)用某一函數(shù)情況下使用。
比如說在常見的訂單支付功能，我們點(diǎn)擊立即付款后，跳轉(zhuǎn)到付款頁面。
這是時(shí)候需要我們不斷訪問后端接口查看用戶是否支付成功，支付成功后進(jìn)行跳轉(zhuǎn)。
我們需要將查詢函數(shù)的調(diào)用寫在mounted函數(shù)中，并通過計(jì)時(shí)器不斷調(diào)用。
? ?mounted() { //頁面渲染之后執(zhí)行,設(shè)置為3s一更新
? ? ? this.timer1 = setInterval(() => {
? ? ? ? this.queryOrderStatus(this.payObj.out_trade_no)
? ? ? }, 3000);
? ? },
? methods: {
? ?
? ? ? //支付跳轉(zhuǎn)
? ? ? queryOrderStatus(orderNo) {
? ? ? ? orderApi.queryPayStatus(orderNo)
? ? ? ? ? .then(response => {
? ? ? ? ? ? if (response.data.success) {
? ? ? ? ? ? ? //支付成功，清除定時(shí)器
? ? ? ? ? ? ? clearInterval(this.timer1)
? ? ? ? ? ? ? //提示
? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? type: 'success',
? ? ? ? ? ? ? ? message: '支付成功! ??'
? ? ? ? ? ? ? })
? ? ? ? ? ? ? //跳轉(zhuǎn)回到課程詳情頁面
? ? ? ? ? ? ? this.$router.push({
? ? ? ? ? ? ? ? path: '/course/' + this.payObj.course_id
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? }
? ? }定時(shí)器方法介紹
this.time1=setInterval(()=>{
this.queryPayStatus(this.this.payObj.out_trade_no)
},3000)setInterval()有兩個(gè)參數(shù)一個(gè)是要執(zhí)行的函數(shù)，一個(gè)是要執(zhí)行的時(shí)間間隔單位為毫秒，此處函數(shù)采用箭頭函數(shù)
ES5 語法如下
setInterval(function(){ alert(“Hello”); }, 3000);將定時(shí)器賦給time 對象
清除定時(shí)器 clearInterval(this.time1)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3配置全局參數(shù)(掛載全局方法)以及組件的使用
這篇文章主要介紹了vue3配置全局參數(shù)(掛載全局方法)以及組件的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
前端Vue設(shè)置cookie、刪除cookie,獲取cookie方式
這篇文章主要介紹了前端Vue設(shè)置cookie、刪除cookie，獲取cookie方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue按回車鍵進(jìn)行搜索的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue按回車鍵進(jìn)行搜索的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在本篇文章里小編給大家整理的是一篇關(guān)于vue中進(jìn)行微博分享的實(shí)例內(nèi)容，有需要的朋友們可以參考下。2019-10-10
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Element實(shí)現(xiàn)動態(tài)表格的示例代碼
最近有有個(gè)項(xiàng)目，通過選擇不同的查詢指標(biāo)展示不同的表格，所以本文就介紹一下Element實(shí)現(xiàn)動態(tài)表格，具體實(shí)現(xiàn)代碼記錄如下，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了從0到1搭建Element的后臺框架的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue中監(jiān)聽路由參數(shù)的變化,給大家介紹了vue中監(jiān)聽路由參數(shù)變化的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue引用json文件,解決怎么從控制臺把數(shù)據(jù)移到j(luò)son文件中，只需要直接右擊復(fù)制值即可，需要的朋友可以參考下2022-09-09
Vue自定義指令是Vue中一種非常有用的擴(kuò)展能力,它允許你在標(biāo)準(zhǔn)的模板語法中使用自定義行為,而不需要編寫新的組件或者混入,這篇文章主要給大家介紹了關(guān)于vue自定義指令的相關(guān)資料,需要的朋友可以參考下2024-03-03