【vue3封装element-plus的反馈组件el-drawer、el-dialog】

vue2中封装el-drawer、el-dialog这类反馈类子组件，需要将父组件的visible值传递子组件，并且再通过$emit将关闭弹窗的组件值传回父组件，同事子组件还需要监听父组件传递过来的visible的值，来驱动弹窗显示隐藏，很麻烦，代码也比较臃肿，vue3中实现方案更加简洁、方便，本文主要示例讲解vue3封装element-plus的对话框、抽屉的实现方案，同时会将vue2的实现示例写出，来进行对比，这两个组件实现方案基本一致，顾放在一起说明

文章目录

vue2封装示例
- - el-dialog组件封装
  - el-drawer组件封装
vue3封装示例
- - - 子组件封装示例：
    - 父组件调用：
结尾说明

vue2封装示例

el-drawer、el-dialog作为子组件的封装基本一致，将二者示例同时展示，主要是方便以后复制粘贴

el-dialog组件封装

父组件调用文件：

javascript 复制代码

<template>
  <div >
    <childDlg @updateVisible="updateVisible" 	
 		  :visible="changeVisible" />
  </div>
</template>

<script>
import childDlg from './childDlg .vue'
export default {
   components:{
     childDlg 
   },
   data(){
		return {
			changeVisible:false//弹窗控制
		}
	},
	methods:{
		// 接收弹窗关闭
		updateVisible(val) {
		  this.changeVisible= val
		}
	}
 </script>

子组件childDlg .vue弹窗封装文件

javascript 复制代码

<template>
  <div>
    <el-dialog title="修改信息"
               :visible.sync="checkDialog"
               :before-close="closeReset"
               :close-on-click-modal="false">
               弹窗展示
              </el-dialog>
  </div>
</template>

<script>
  export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    checkDialog: {
      get() {
        return this.visible
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 changeVisible的值
        this.$emit('updateVisible', val)
      },
    },
  },  
  watch:{
    visible(newVal){//可以执行异步
      if(newVal){
        this.openDialog()
      }
    }
  },
  methods:{
  	openDialog(){
  		//打开弹窗事件
  	},
    closeReset(done) {//弹窗关闭
      this.checkDialog = false
    },
  }
  }
</script>

<style lang="scss" scoped>

</style>

el-drawer组件封装

父组件调用文件：

javascript 复制代码

<template>
  <div >
    <childDrawer  @updateVisible="updateVisible" 	
 		  :visible="changeVisible" />
  </div>
</template>

<script>
import childDrawerfrom './childDrawer.vue'
export default {
   components:{
     childDrawer
   },
   data(){
		return {
			changeVisible:false//抽屉控制
		}
	},
	methods:{
		// 接收抽屉关闭
		updateVisible(val) {
		  this.changeVisible= val
		}
	}
 </script> ```

子组件childDrawer.vue弹窗封装文件
 

```javascript
<template>
  <div>
    <el-drawertitle="修改信息"
               :visible.sync="checkDialog"
               :before-close="closeReset"
               >
               抽屉展示
              </el-dialog>
  </div>
</template>

<script>
  export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    checkDialog: {
      get() {
        return this.visible
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 changeVisible的值
        this.$emit('updateVisible', val)
      },
    },
  },  
  watch:{
    visible(newVal){//可以执行异步
      if(newVal){
        this.openDialog()
      }
    }
  },
  methods:{
  	openDialog(){
  		//打开抽屉事件
  	},
    closeReset(done) {//弹窗关闭
      this.checkDialog = false
    },
  }
  }
</script>

<style lang="scss" scoped>

</style>

vue3封装示例

这里主要以el-drawer为例说明，el-dialog组件会将代码块粘贴，二者使用上是完全一致的，当然vue3与vue2封装上的主要区别，在于vue3使用的< script setup >方式声明为了保证文件独立性，将组件进行了全封闭，换句话说，控制子组件的弹窗、抽屉的属性值需要在子组件内，而不是像vue2封装一样在父组件中，通过父组件值的true或者false来控制弹窗显示隐藏，那如此要解决的最主要的问题就是如何"点击父组件的按钮让子组件弹出来"

这里会用到新属性：defineExpose()方法，官方描述：使用 <script setup> 的组件是默认关闭的------即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

示例：

javascript 复制代码

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

文档地址：vue3--defineExpose()

子组件封装示例：

说明：在子组件中声明关闭与打开方法：open()与close()用于修改控制抽屉开关的值drawer，以方便父组件调取

drawerChild.vue文件

javascript 复制代码

<template>
  <el-drawer v-model="drawer"
             title="抽屉标题">
    <span>抽屉内容</span>
  </el-drawer>
</template>

<script setup>
const drawer = ref(false)
function open() {
  drawer.value = true
}
function close() {
  drawer.value = false
}
defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
</style>

父组件调用：

javascript 复制代码

<!-- 抽屉 -->
	<el-button @click="openDrawer">打开抽屉</el-button>
    <drawer-child ref="drawerChildRef" />

javascript 复制代码

<script setup>
import drawerChildfrom './drawerChild.vue'

const drawerChildRef= ref(null) //抽屉ref

function openDrawer() {
  drawerChildRef.value.open()
}

除此之外，相关的父子组件传值还是可以继续使用Props、emit来实现的

difineProps：子组件接收父组件传过来的值。

difineEmits: 子组件接收父组件传过来的方法。

这里不做过多演示

结尾说明

从代码简洁度，逻辑条理性上无疑vue3相对于vue2都是更胜一筹的，vue3本身还有很多非常优秀的api创新，建议多阅读官方文档：vue3官方文档

接下来把el-dialog封装也贴一下，方便日后复制粘贴

javascript 复制代码

<template>
  <el-dialog v-model="dialogVisible"
             title="弹窗标题">
    <span>弹窗内容</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false)
function open() {
  dialogVisible.value = true
}
function close() {
  dialogVisible.value = false
}
defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
</style>