:visible:sync&this.$emit(‘update:close‘, false)

最新推荐文章于 2022-09-08 11:24:17 发布

给你喝豆浆啊

最新推荐文章于 2022-09-08 11:24:17 发布

阅读量275

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/xj2wjtx/article/details/125219646

版权

第①种

//父组件
<Drawer :drawer="drawer" @close="handleClose"></Drawer>

//关闭抽屉
handleClose(e) {
   console.log(e)
   this.drawer = e
}



//子组件
<el-drawer
    title=""
    :visible.sync="drawer"
    :direction="direction"
    :before-close="closeDrawer"
    class="drawer"
  >
</el-drawer>
closeDrawer() {
   this.$emit('close', false)
}

第②种
this.$emit(‘update:close’, false)

//父组件
<Drawer :drawer="drawer" @update:close="drawer=$event"></Drawer>



//子组件
closeDrawer() {
   this.$emit('update:close', false)
}

第③种
:visible:sync

<Drawer :drawer.sync="drawer" @close="handleClose"></Drawer>
//关闭抽屉
handleClose(e) {
   console.log(e)
   this.drawer = e
}


//子组件
<el-drawer
    title=""
    :visible.sync="drawer"
    :direction="direction"
    :before-close="closeDrawer"
    class="drawer"
  >
</el-drawer>
closeDrawer() {
   this.$emit('close', false)
}