封裝的組件

<template><Modal footer-hide :closable="false" title="刪除確認(rèn)" 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" />

數(shù)據(jù)：

modalShow: false,

子組件傳遞給父組件的方法的實現(xiàn)

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);},

效果：

?

轉(zhuǎn)載于:https://www.cnblogs.com/guangzhou11/p/11357000.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。