利用Vue3实现一个可以用js调用的组件

最近遇到个功能要求,想要在全局中调用组件,而且要在某些js文件内调用,所以这篇文章主要给大家介绍了关于如何利用Vue3实现一个可以用js调用的组件的相关资料,需要的朋友可以参考下

前言

项目开发中基本都会用到组件库，但是设计稿样式和功能不一定和组件库相同，尤其像是消息提示弹窗、确认弹窗，各个项目各个设计师都有自己的一套风格。虽然我们可以使用组件库中的组件对其进行样式覆盖来使用。但是一些定制功能还是不容易修改，这种情况我们就会选择自定义组件，然后通过 components 属性引入页面，显式写入标签调用的，对于消息提示这种给用户简单的提示或操作，大多数常用的ui库类似功能都支持通过js调用。我们也可以参照ui库的调用方式，实现一个通过js函数调用的自定义组件。

一、常规Vue组件

假如我们需要实现一个确认框，点击按钮打开确认框，点击确认框的确定和取消按钮关闭确认框，并调用对应方法。

1. 组件主要代码：

src/components/Confirm/Confirm.vue

2. 使用方式

3. 实现效果

二、改为js调用组件

上面的调用组件的方式非常繁琐，既要引入，又要处理各中操作的回调，并且组件dom节点插入到当前页面之下，样式有可被组件内容覆盖或者受到其他影响。

我们希望实现的结果：通过js函数的方式调用组件，函数返回一个promise，确认then，取消catch`，例如:

 Confirm({ title: '', message: '' }).then(() => { // 点击确认 }).catch(() => { // 点击取消 })

1. 实现步骤：

首先确认需要返回一个 promise 对象。创建一个方法，首先返回一个 promise 对象。
使用Vue 的 createApp 方法创建 Confirm 组件实例。使用 createApp 第二个参数，我们可以将根 prop 传递给应用程序，将组件所需要的数据传入。
创建一个节点，用作将组件实例挂载的容器，将节点append到body中。
将组件实例挂载到创建的节点上，就实现组件的上级是body，不会受到调用页面影响。
当点击确定调用 resolve，并卸载当前组件，移除dom。点击取消调用 reject 并卸载当前组件，移除dom。

2. 具体实现代码：

修改 Confirm 组件js部分，将 onConfirm 和 onCancel 从props 中传递进来，方便组件实例使用。

 // src/components/Confirm/Confirm.vue

在同目录下新建 index.js文件，将 onConfirm、onCancel 等参数通过props传递到组件，在实例中就能接收到事件回调。

 // src/components/Confirm/index.js import { createApp } from 'vue' import Confirm from './Confirm' function confirm ({ title, message, confirmBtnText, cancelBtnText }) { return new Promise((resolve, reject) => { // 实例化组件，createApp第二个参数是props const confirmInstance = createApp(Confirm, { title: title || '提示', message: message || '确认消息', confirmBtnText: confirmBtnText || '确定', cancelBtnText: cancelBtnText || '取消', onConfirm: () => { unmount() resolve() }, onCancel: () => { unmount() reject(new Error()) } }) // 卸载组件 const unmount = () => { confirmInstance.unmount() document.body.removeChild(parentNode) } // 创建一个挂载容器 const parentNode = document.createElement('div') document.body.appendChild(parentNode) // 挂载组件 confirmInstance.mount(parentNode) }) } export default confirm

使用组件

 setup () { const showConfirm = () => { Confirm({ title: '标题', message: '内容' }).then(() => { console.log('点击确认') }).catch(() => { console.log('点击取消') }) } return { showConfirm } }