The problem of mounted only once for the vue subcomponent encapsulation of the bullet frame and the solution

Vue subcomponent encapsulation of the frame can only be executed once.

It encapsulates a child component to process the content of the pop-up frame. It is found that it can only be executed once. Add a v-if to the parent component. There is no problem destroying the component every time the pop-up frame is closed.

Post a simple code:

Parent component:

<add-dialog v-if="addVisible" :dialogVisible="addVisible" @addClose="addClose"></add-dialog>

addClose () {
   = false
}

Subcomponents:

<template>
  <div class="box">
    <el-dialog
      title="hint"
      :="dialogVisible"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Pick remove</el-button>
        <el-button type="primary" @click="dialogVisible = false">Confirm Certainly</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: Boolean
  },
  watch: {
    dialogVisible: function () {
      this.$emit('addClose')
    }
  }
}
</script>

Under what circumstances does the vue mounted method use and js timer

This is what I write in common blogs

• created: Called before the template is rendered into html, that is, certain attribute values ​​are usually initialized and then rendered into a view.
• mounted: Called after the template is rendered into html. Usually, after the initialization page is completed, some required operations are performed on the html dom node.

In actual development, we often use the create method. Before the page is rendered into html, we call the function to obtain data from the backend, and display the page data in the implementation.

For example, the following example

created() {

      if(this.$)
        =this.$
      ()
    },
    methods:{
      getOrderInfo(){
        ().then(resp=>{
          =
          (())
          //Get the teacher's name based on the teacher id in the order          getDetailTeacher().then(
            resp=>{
              =
              ()
            }
          )

        }).catch(error=>{

        })
      },

When do we use the mounted method?

Mounted is usually operated in the use of some plug-ins or components, that is, it is executed after page rendering. Usually, we will use it without corresponding click events, but we need to continuously call a certain function during the page display process.

For example, in the common order payment function, after we click Pay immediately, we will jump to the payment page.

This is the time when we need to constantly access the backend interface to see if the user has paid successfully and jump after the payment is successful.

We need to write the call of the query function in the mounted function and continuously call it through a timer.

   mounted() { //Execute after page rendering, set to 3s update      this.timer1 = setInterval(() => {
        (.out_trade_no)
      }, 3000);
    },
  methods: {
   
      //Payment jump      queryOrderStatus(orderNo) {
        (orderNo)
          .then(response => {
            if () {
              //Pay successfully, clear the timer              clearInterval(this.timer1)
              //hint              this.$message({
                type: 'success',
                message: 'Payment is successful! 💴'
              })
              //Skip back to the course details page              this.$({
                path: '/course/' + .course_id
              })
            }
          })
      }
    }

Introduction to timer method

this.time1=setInterval(()=>{
(.out_trade_no)
},3000)

setInterval() has two parameters: one is the function to be executed, and the other is the time interval to be executed is milliseconds. Here the function uses the arrow function

The ES5 syntax is as follows

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

Assign a timer to a time object

Clear timer clearInterval(this.time1)

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.