Vue3命令式组件封装

发布网友发布时间：2024-10-09 07:29

共1个回答

热心网友时间：2024-12-14 12:13

Vue3中，常见的弹窗组件封装方式存在复用性差、代码冗余的问题。本文将介绍一种命令式组件封装的新方法，提高组件的灵活性和管理效率。

命令式组件封装的核心在于，组件内部包含功能逻辑，提供一组接口或方法，通过外部调用来控制组件行为。比如，你可以创建一个名为MessageBox的组件，它接收title、content等参数，隐藏显示状态由组件自身管理，外部只需通过函数调用控制其行为，如设置按钮文本和触发确认或关闭操作。

在封装过程中，首先在MessageBox.vue中，定义组件的样式、过渡效果，并设置isVisible和type变量。接着编写setVisible方法来切换显示状态，给按钮添加点击事件。为了保持状态一致性，创建一个Promise函数，当组件卸载时，根据用户操作决定resolve或reject。

在实际调用时，通过这个函数创建组件实例并挂载，可以根据用户点击事件处理不同的业务逻辑。例如，点击确定按钮时，执行.then中的业务操作，点击取消则执行.catch中的逻辑。

为了扩展组件功能，例如在弹窗内展示表单，可以在MessageBox.vue中添加一个contentView函数，根据传入的type参数动态渲染内容。这样，只需在调用组件时传入不同的type值，即可实现丰富的功能展示。