Vue弹窗组件：v-model与Promise实现方式对比

本文档主要探讨了在Vue开发中实现弹窗组件的两种方法：使用`v-model`结合`props`和`$emit`以及利用Promise进行回调管理。首先，我们来详细解析这两种方式。 1. **v-model结合props和$emit方式** - 这种方法通过将弹窗状态`showModal`作为`v-model`绑定的值，实现组件的显示与隐藏。当用户点击“取消”或“确认”按钮时，相应的事件`@on-cancel`和`@on-ok`会被触发，对应的`onCancel`和`onOK`方法会被调用。这种方式的优点在于代码结构清晰，逻辑分开，但可能会导致回调函数较多，使得代码稍显冗余。 ```html <chat-modalref="chat-modal" :showModal="showModal" @on-cancel="onCancel" @on-ok="onOK"> <div slot="content">自定义内容</div> </chat-modal> ``` `methods`部分： ```javascript methods: { display() { this.showModal = true; }, onOK() { // 处理确认操作逻辑 }, onCancel() { // 处理取消操作逻辑 } } ``` 2. **Promise回调方式** - 作者考虑到上一种方式中处理取消和确认回调的逻辑分散，采用Promise封装了弹窗的打开方法。通过`.openModal`调用，传递标题、确认和取消文本作为参数。这种方式的好处在于将逻辑集中在一个地方，代码更加简洁，有利于维护和复用。 ```html <chat-modalref="chat-modal"></chat-modal> ``` `methods`部分： ```javascript methods: { display() { this.$refs["chat-modal"].openModal({ title: "弹窗标题", sureText: "确认", cancelText: "取消" }).then((res) => { this.onOK(); }, (res) => { this.onCancel(); }); } } ``` 然而，需要注意的是，作者提到组件的样式可能不够优雅，这在实际开发中是需要额外关注和优化的部分。此外，作者也表示希望读者在阅读和实践这些方法时，能够提出任何改进意见，以便共同提升代码质量。 总结来说，这篇文章为开发者提供了两种实现Vue弹窗组件的方法，适合在面临现有组件库不可用时，独立编写简单且易于维护的弹窗组件。无论是通过`v-model`配合事件监听还是使用Promise封装回调，都是根据项目需求和个人偏好选择的最佳实践。