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>
相关推荐
xjt_09011 分钟前
浅析Web存储系统
前端
foxhuli22939 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu1 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js