vue

1、子组件中有el-dialog时控制隐藏的方法

// 父组件
<template>
    <div class="rightsContainer">
        <el-button size="small" @click="showDialog = !showDialog">显示弹窗</el-button>
        <cardCustomRightsDialog :visible.sync="showDialog"></cardCustomRightsDialog>
    </div>
</template>
<script>
export default {
  components: {
    cardCustomRightsDialog: () => import('./cardCustomRightsDialog')
  },
  data () {
    return {
      showDialog: false
    }
  }
}
</script>
// 子组件
<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisiable"
            title="自定义权限"
        >

        </el-dialog>
    </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisiable: {
      get () {
        return this.visible
      },
      set (val) {
        console.log(val)
        this.$emit('update:visible', val) // 这里我尝试没有效果所以使用的是利用调父组件的方法来控制父元素的data
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>

2、使用定时器的两种方法

　　1. 在方法中创建并使用定时器，在销毁组件时清除定时器

mounted(){
  this.timer = setInterval(()=>{
    console.log(1)
  },1000)      
},
beforeDestory(){
  clearInterval(this.timer)  
}

　　2. 通过同一个方法中设置定时器，并用$once来清除定时器

mounted(){
  const timer = setInterval(()=>{
    console.log(1)
  },1000)
  this.$once('hook:beforeDestroy', ()=>{
    clearInterval(timer)
  })
}