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>
相关推荐
十盒半价10 分钟前
TypeScript + React:大型项目开发的黄金搭档
前端·typescript·trae
楚轩努力变强1 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端1 小时前
rust基础二(闭包)
前端·rust
菜鸟学Python1 小时前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er2 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping2 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗2 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录3 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http