Vue3封装通用确认删除按钮实战案例

初始代码

html 复制代码
<script setup>

</script>

<template>
  <a-popconfirm
      title="您确认要删除吗?"
      ok-text="确认"
      cancel-text="取消"
      @confirm="onDelete(record.id)"
  >
    <a-button size="small" type="primary" danger>删除</a-button>
  </a-popconfirm>
</template>

要解决的问题

  • 怎么让这个onDelete方法变成通用的
  • 怎么让record.id也就是要删除的ID变成通用的

解决思路

  • defineProps 可以定义属性, 这个要删除的ID可以通过属性传过来
  • emit可以定义事件, 删除方法可以通过事件传递

定义属性

js 复制代码
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

定义方法

js 复制代码
// 定义要暴露的方法
const emit = defineEmits(["delete"])

// 定义触发的方法
function onDelete() {
  // 通过emit传值
  emit("delete", props.id)
}

完整代码

html 复制代码
<script setup>
// 定义属性
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

// 定义要暴露的方法
const emit = defineEmits(["delete"])

// 定义触发的方法
function onDelete() {
  // 通过emit传值
  emit("delete", props.id)
}
</script>

<template>
  <a-popconfirm
      title="您确认要删除吗?"
      ok-text="确认"
      cancel-text="取消"
      @confirm="onDelete"
  >
    <a-button size="small" type="primary" danger>删除</a-button>
  </a-popconfirm>
</template>

优化代码

ID可以等到父组件监听到点击事件的时候手动传入, 而不需要通过属性传入.

html 复制代码
<script setup>
// 定义要暴露的方法
const emit = defineEmits(["delete"])

// 定义触发的方法
function onDelete() {
  // 通过emit传值
  emit("delete")
}
</script>

<template>
  <a-popconfirm
      title="您确认要删除吗?"
      ok-text="确认"
      cancel-text="取消"
      @confirm="onDelete"
  >
    <a-button size="small" type="primary" danger>删除</a-button>
  </a-popconfirm>
</template>
相关推荐
用户280038329084016 小时前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
toooooop816 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_16 小时前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy16 小时前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全16 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101216 小时前
[前端]1.html基础
前端·笔记·学习·html
白水清风16 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy16 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全16 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐16 小时前
qiankun 微前端接入实战
前端·js·微前端