vue子組件封裝彈框隻能執行一次的mounted問題及解決

Posted on by

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)

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：