vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
更新時間：2023年03月02日 14:53:43 作者：給你六圓錢
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue子組件封裝彈框只能執(zhí)行一次的mounted
封裝了一個子組件來處理彈框內(nèi)容，發(fā)現(xiàn)只能執(zhí)行一次，在父組件添加一個 v-if 即可，當每次彈框關(guān)閉的時候銷毀掉該組件就沒有問題了。
貼一下簡易代碼：
父組件：
<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前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作。
在實際的開發(fā)過程中我們會經(jīng)常使用create方法，在頁面還未渲染成html前，調(diào)用函數(shù)，從后端獲取數(shù)據(jù)，在實現(xiàn)對頁面的數(shù)據(jù)進行顯示。
比如說下面例子
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=>{
? ? ? ? })
? ? ? },我們在什么時候使用mounted方法？
mounted通常是在一些插件的使用或者組件的使用中進行操作 也就是頁面渲染之后執(zhí)行 通常情況下我們會在沒有相應(yīng)的點擊事件，但需要在頁面展示過程中去不斷調(diào)用某一函數(shù)情況下使用。
比如說在常見的訂單支付功能，我們點擊立即付款后，跳轉(zhuǎn)到付款頁面。
這是時候需要我們不斷訪問后端接口查看用戶是否支付成功，支付成功后進行跳轉(zhuǎn)。
我們需要將查詢函數(shù)的調(diào)用寫在mounted函數(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) {
? ? ? ? ? ? ? //支付成功，清除定時器
? ? ? ? ? ? ? clearInterval(this.timer1)
? ? ? ? ? ? ? //提示
? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? type: 'success',
? ? ? ? ? ? ? ? message: '支付成功! ??'
? ? ? ? ? ? ? })
? ? ? ? ? ? ? //跳轉(zhuǎn)回到課程詳情頁面
? ? ? ? ? ? ? this.$router.push({
? ? ? ? ? ? ? ? path: '/course/' + this.payObj.course_id
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? }
? ? }定時器方法介紹
this.time1=setInterval(()=>{
this.queryPayStatus(this.this.payObj.out_trade_no)
},3000)setInterval()有兩個參數(shù)一個是要執(zhí)行的函數(shù)，一個是要執(zhí)行的時間間隔單位為毫秒，此處函數(shù)采用箭頭函數(shù)
ES5 語法如下
setInterval(function(){ alert(“Hello”); }, 3000);將定時器賦給time 對象
清除定時器 clearInterval(this.time1)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
vue中v-model、v-bind和v-on三大指令的區(qū)別詳解
v-model和v-bind都是數(shù)據(jù)綁定的方式,下面這篇文章主要給大家介紹了關(guān)于vue中v-model、v-bind和v-on三大指令的區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue中的provide / inject 有什么用處,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue中rem的配置的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue2的異步更新機制是基于JavaScript的事件循環(huán)機制實現(xiàn)的。nextTick方法則是在DOM更新后執(zhí)行回調(diào)函數(shù)。本文詳細介紹了Vue2的異步更新機制和nextTick原理，對于理解Vue2的渲染機制和優(yōu)化性能有很大的幫助。2023-04-04
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章 會詳細介紹該內(nèi)容，感興趣的小伙伴不要錯過喲2021-09-09
這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
Vue3?跨域配置devServer的參數(shù)和設(shè)置方法
這篇文章主要介紹了Vue3?跨域配置devServer的參數(shù)和設(shè)置,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue如何實現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細介紹了vue如何實現(xiàn)observer和watcher源碼的相關(guān)資料，分析vue的observe實現(xiàn)源碼，聊聊如何一步一步實現(xiàn)$watch，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
基于el-table實現(xiàn)行內(nèi)增刪改功能
這篇文章主要介紹了基于el-table實現(xiàn)行內(nèi)增刪改功能,用過通過操作按鈕點擊刪除或者編輯功能即可實現(xiàn)相應(yīng)的效果,下面小編給大家分享實例代碼感興趣的朋友跟隨小編一起看看吧2024-04-04