封裝的組件

<template><Modal footer-hide :closable="false" title="刪除確認" v-model="modalShow" :styles="{top: '20px'}"><div style="text-align:center"><p>你確定刪除嗎？</p></div><Divider /><div style="display: flex;flex-direction: row;justify-content:space-between;"><Button @click="$emit('cancelModel')">取消</Button><Button type="primary" @click="$emit('okModel')">刪除</Button></div></Modal> </template> <script> export default {name: "deletemodal",props: {modalShow: Boolean} }; </script>

組件引入

import DeleteModel from "../../components/DeleteModel/DeleteModel";components: {DeleteModel},

使用組件

<DeleteModel :modalShow="modalShow" @cancelModel="cancelModel" @okModel="okModel" />

數據：

modalShow: false,

子組件傳遞給父組件的方法的實現

cancelModel() {this.modalShow = false;},okModel() {this.modalShow = false;var arr = [];arr.push(this.roleId);deletcile(arr).then(res => {this.$Message.success(res.data.msg);this.reload();}).catch();// console.log(e);},

效果：

?

轉載于:https://www.cnblogs.com/guangzhou11/p/11357000.html

總結

以上是生活随笔為你收集整理的ivew 封装删除 对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。