vue2二次封装element ui的抽屉组件el-drawer

1、父组件

<template>
  <div class="test">
    <button @click="openDrawer">打开抽屉</button>
    <drawer-component :visible.sync="drawerVisible" ref="drawerComponent" title="我是抽屉标题" @closed="handleDrawerClosed"></drawer-component>
  </div>
</template>
<script>
import DrawerComponent from './components/Drawer'
export default {
  data() {
    return{
      drawerVisible: false,
    }
  },
  components:{
    DrawerComponent,
  },
  methods:{
    openDrawer() {
      this.drawerVisible = true;
      console.log(this.drawerVisible);
    },
    handleDrawerClosed() {
      this.drawerVisible = false;
      console.log('抽屉已关闭');
    },
  }
}
</script>
<style scoped>
.test{width: 100vw;height: 100vh;background: #ccc}
</style>

2、子组件

<template>
  <div>
    <el-drawer
        :visible.sync="localVisible"
        :size="drawersize"
        :destroy-on-close="true"
        :direction="direction"
        @close="handleClose">
      <div class="chatModal">
        asdasdasdasda
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "DrawerComponent",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      drawersize: "540px",
      direction: "rtl",
      localVisible: this.visible
    };
  },
  watch: {
    visible(newVal) {
      this.localVisible = newVal;
    },
    localVisible(newVal) {
      this.$emit('update:visible', newVal);
    }
  },
  methods: {
    handleClose() {
      this.localVisible = false;
      this.$emit('closed');
    }
  },
  mounted() {
    console.log(this.visible);
  },
}
</script>