element-plus里面的抽屉Drawer的使用

 示范代码官网都有，我这里只针对要代码模块化，需要把抽屉专门封装成一个组件的情况。

官网：一个 Vue 3 UI 框架 | Element Plus

好处是代码看着更清晰，不乱。

(背景Vue3，如果是vue2，同理)

封装组件的话，需要在父组件中调用封装的抽屉子组件标签。

为了让代码更清晰，模块化，把抽屉单独封装成一个组件。

目的：父组件定义按钮，点击按钮，触发抽屉组件，抽屉展开

思路：

1，父组件定义触发按钮的方法（暂时定义空方法，不写逻辑）

2. 子组件，写抽屉代码，给抽屉添加v-mode，双向绑定的变量 的值为布尔值true/false，打开/关闭抽屉

3.子组件向外暴露一个方法，方法内容为v-model的值等于= true，打开抽屉

4. 父组件在子组件标签上面添加ref属性，用以打标记，便于引用子组件

5. 定义父组件按钮的代码逻辑：引用子组件暴露的方法。打开了抽屉

父组件：

父组件
<template>
//子组件标签
    <elDrawer></elDrawer>
</template>

新建components/elDrawer.vue子组件文件 ：

<template>
//抽屉
  <el-drawertitle="I am the title" :with-header="false">
    <span>Hi there!</span>
  </el-drawer>
</template>

点击父组件的按钮，触发抽屉，那么，在父组件需要的位置，放置子组件标签，然后，给子组件标签加ref属性，（目的是为了给组件打个标记，便于引用） 

ref作用:  在不用原生js的情况下, 操作DOM，相当于原生js的 id 在元素位置打个标识, 然后它的引用信息会出现在$refs内

//父组件
<template>
//引用子组件的ref属性pub
    <elDrawer ref="pub"></elDrawer>
</template>

定义pub，并引入

//父组件：
import { ref } from 'vue'
const pub = ref()

让点击父组件的“发布文章”按钮，就触发子组件的抽屉：

 给按钮添加方法：publish()

//父组件-发布文章按钮：
const pub = ref()
const publish = () => {
//log一下，测试
  console.log('发布文章')
}

 按钮可以正确触发，那么，给子组件里面写一个方法open()，名称自定义。用于打开抽屉：

//子组件：
//自定义常量，drawer，默认关闭
const drawer = ref(false)
//触发open方法就打开
const open = () => {
  drawer.value = true
}
//导出open方法，父组件就能接收到该方法
defineExpose({ open })

子组件抽屉使用v-model，值为drawer:

//抽屉组件
//v-model=drawer， drawer=true/false,用以控制抽屉的打开/关闭
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">

 父组件设置：

//引用子组件
const pub = ref()
// 发布文章按钮
const publish = () => {
//点击按钮，触发publish方法，方法的逻辑是触发open方法，open方法是打开（drawer=true了）
  pub.value.open()
}

抽屉打开了！

如果不分模块，代码更简洁，也省略了ref引用之类的步骤，但是这样更清晰简洁，也符合代码模块化吧。看自己。