vue公共删除组件

1.由于很多组件都要做删除功能，所以提取一个公共组件delBtn

<template>
  <el-button type="danger" @click="del">删除</el-button>
</template>

<script>
export default {
  methods: {
    del() {
      this.$confirm("你确定要删除吗?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        confirmButtonClass:"el-button el-button--danger",
        type: "warning"
      })
        .then(() => {
           //用户点了确定，通知父组件该删了
           this.$emit("confirm")
            
        })
        .catch(() => {});
    }
  }
};
</script>

2.components/index.js 注册

//删除组件
import delBtn from "./delBtn.vue"
Vue.component("delBtn",delBtn)

3.role/list.vue 调用

<del-btn @confirm="del(scope.row.id)"></del-btn>

	//31.删除
    del(id) {
      reqRoleDel({ id: id }).then(res => {
        if (res.data.code == 200) {
          successalert(res.data.msg);
          this.$emit("init");
        }
      });
    },