vue子組件封裝彈框只能執(zhí)行一次的mounted如何解決

這篇文章主要介紹“vue子組件封裝彈框只能執(zhí)行一次的mounted如何解決”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue子組件封裝彈框只能執(zhí)行一次的mounted如何解決”文章能幫助大家解決問(wèn)題。

vue子組件封裝彈框只能執(zhí)行一次的mounted

封裝了一個(gè)子組件來(lái)處理彈框內(nèi)容，發(fā)現(xiàn)只能執(zhí)行一次，在父組件添加一個(gè) v-if 即可，當(dāng)每次彈框關(guān)閉的時(shí)候銷(xiāo)毀掉該組件就沒(méi)有問(wèn)題了。

貼一下簡(jiǎ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定時(shí)器使用

在常見(jiàn)的博客中都會(huì)這樣寫(xiě)到

• created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。

• mounted:在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

在實(shí)際的開(kāi)發(fā)過(guò)程中我們會(huì)經(jīng)常使用create方法，在頁(yè)面還未渲染成html前，調(diào)用函數(shù)，從后端獲取數(shù)據(jù)，在實(shí)現(xiàn)對(duì)頁(yè)面的數(shù)據(jù)進(jìn)行顯示。

比如說(shuō)下面例子

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=>{

        })
      },

我們?cè)谑裁磿r(shí)候使用mounted方法？

mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作 也就是頁(yè)面渲染之后執(zhí)行 通常情況下我們會(huì)在沒(méi)有相應(yīng)的點(diǎn)擊事件，但需要在頁(yè)面展示過(guò)程中去不斷調(diào)用某一函數(shù)情況下使用。

比如說(shuō)在常見(jiàn)的訂單支付功能，我們點(diǎn)擊立即付款后，跳轉(zhuǎn)到付款頁(yè)面。

這是時(shí)候需要我們不斷訪(fǎng)問(wèn)后端接口查看用戶(hù)是否支付成功，支付成功后進(jìn)行跳轉(zhuǎn)。

我們需要將查詢(xún)函數(shù)的調(diào)用寫(xiě)在mounted函數(shù)中，并通過(guò)計(jì)時(shí)器不斷調(diào)用。

   mounted() { //頁(yè)面渲染之后執(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)回到課程詳情頁(yè)面
              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 語(yǔ)法如下

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

將定時(shí)器賦給time 對(duì)象

清除定時(shí)器 clearInterval(this.time1)

關(guān)于“vue子組件封裝彈框只能執(zhí)行一次的mounted如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。