vue el-drawer进入重新加载、关闭销毁

vue进入项目时会加载所有组件，导致加载时间长。但是有些组件可以通过自己点击等操作再加载。
！组件重新进入时需要重新调用方法或者初始数据。
如果不销毁组件的话，可以通过watch来控制抽屉组件的visible来实现以上功能。

使用v-if来控制组件是否允许加载

一. 父组件v-if控制子组件加载和销毁，子组件抽屉一直是打开状态。点击打开父组件允许子组件加载，子组件抽屉关闭时emit调用父组件销毁子组件的方法。简单但是不能用抽屉组件自带的关闭方法（点击遮罩层和右上角的x关闭）。

父组件

<!-- html -->
<el-button @click="openDrawer ">打开抽屉</el-button>
<DemoDrawer v-if="drawer" @closeDrawer="closeDrawer" />

  data () {
    return {
      drawer: false,
       }
  },
  methods: {
    openDrawer () {
      this.drawer = true
    },
    // 子组件调用父组件该方法来关闭抽屉
    closeDrawer (value) {
      this.drawer = value
    }
  }

子组件

<el-drawer class="eldrawer" :visible="true" >
	<el-button @click="close">关闭抽屉</el-button><br />
</el-drawer>

methods: {
  close () {
    this.$emit('closeDrawer', false)
  }
}

二. 父组件v-if控制子组件加载和销毁，但是子组件抽屉控制自己打开和关闭，这样可以用组件自带的关闭方法。点击打开父组件允许加载子组件，同时refs调用子组件打开抽屉方法（！一定要子组件加载完才能调用子组件方法）。子组件关闭抽屉时调用自己关闭抽屉方法，同时调用父组件销毁子组件的方法。

父组件

<!-- html -->
<el-button @click="open">打开抽屉</el-button>
<DemoDrawer v-if="drawer" ref="demoDrawer" @closeDrawer="closeDrawer" />

  data () {
    return {
      drawer: false,
       }
  },
  methods: {
  open () {
  	  this.drawer = true
      this.$nextTick(() => {
        this.$refs.demoDrawer.open2()
      })
    },
   /* async open () {
      await (() => {
        this.drawer = true
      })()
      this.$refs.demoDrawer.open2()
    }, */
    // 子组件调用父组件该方法来关闭抽屉
    closeDrawer (value) {
      this.drawer = value
    },
  }

子组件

  <el-drawer
    class="eldrawer"
    :visible.sync="childDrawer"
    :before-close="handleClose"
  >
    <h1>childDrawer</h1>
    <span>{{ num }}</span>
    <button @click="num++">+1</button>
    <el-button @click="close">关闭抽屉2</el-button><br />
  </el-drawer>

  mounted () {
    console.log('我是子组件，num也重置了');
  },
  data () {
    return {
      childDrawer: false,
      num: 0,
    }
  },

  methods: {
    close () {
      this.childDrawer = false
      this.$emit('closeDrawer', false)
    },
    open2 () {
      this.childDrawer = true
    },
    handleClose () {
      this.close()
    }
  }