VUE实现自身整体组件销毁

V-IF实现组件自身销毁

前面说了一些自己怎么思考得来，如果时间急可直接看
最后~~~~

通知提示组件案例分析

在编写一些简单的通知组件案例中，可能会这样去写

//在[index.js]的install方法里
setTimeOut(()=>{
    document.body.removeChild([DOM])
, timer}
//定时的移除DOM

再看另一个Loading插件案例V-show

template :

javascript :

 export default {
    name: 'loading',
    data(){
      return {
        showLoading: false
      }
    },
    methods: {
      show(){
        this.showLoading = true
      },
      hidden(){
        this.showLoading = false
      }
    },
    mounted() {
      console.log('Loading is mounted!!!')
    },
  }

看完上一个联想V-IF控制DOM渲染

因此在template里div最外层绑定v-if属性就可以,再有方法控制其值即可
template :

javascript :

export default {
  name: 'Test',
  data() {
    return {
      canShow: true
    }
  },
  mounted() {
    setTimeout(()=>{
      this.canShow = false
    },1000)
  }
}