vue组件之间调用,vue3函数式组件
最近遇到一个功能需求，想全局调用组件，而且是在一些js文件中，所以本文主要介绍如何使用Vue3实现一个可以被js调用的组件的相关信息。有需要的朋友可以参考一下。
目录
前言1。一般Vue组件1。组件的主要代码：2。使用模式3。实施效果2。js 1调用组件。实施步骤：2。具体实现代码：3。实施效果总结。
前言
项目的开发中基本都会用到组件库，但是设计稿的风格和功能不一定和组件库一样，比如消息提示弹出、确认弹出等。每个项目的每个设计师都有自己的风格。虽然我们可以使用组件库中的组件来样式覆盖它们。但是，一些自定义函数仍然不容易修改。在这种情况下，我们将选择自定义组件，然后通过components属性将它们引入到页面中，并显式地将它们写入标记中以供调用。对于消息提示等简单的提示或操作，大多数常见的ui库类似函数都支持通过js调用。我们也可以参考ui库的调用方法，实现一个js函数调用的自定义组件。
一、常规Vue组件
如果我们需要实现一个确认框，点击按钮打开确认框，点击确定和取消按钮关闭确认框，调用相应的方法。
1. 组件主要代码：
src/components/确认/确认. vue
2. 使用方式
3. 实现效果
二、改为js调用组件
上面调用组件的方法非常复杂，涉及到各种操作的回调的引入和处理。此外，组件的dom节点被插入到当前页面之下，并且样式可能被组件的内容所覆盖或者受到其他影响。
我们想要实现的：通过js函数调用组件，函数返回一个承诺，然后确认，取消catch，例如：
确认({
标题： ，
消息：“”
}).然后(()={
//点击确定。
}).catch(()={
//点击取消
})
1. 实现步骤：
首先确认你需要返回一个promise对象。创建一个首先返回promise对象的方法。
使用Vue的createApp方法创建确认组件实例。使用createApp的第二个参数，我们可以将根属性传递给应用程序，并传入组件所需的数据。
创建一个节点，用作安装组件实例的容器，并将该节点附加到主体。
当组件实例挂载在创建的节点上时，组件的上级就是主体，不会受到调用页面的影响。
单击“确定”调用resolve，卸载当前组件，并移除dom。单击取消呼叫拒绝并卸载当前组件以删除dom。
2. 具体实现代码：
修改确认组件的js部分，从props中调用onConfirm和onCancel，方便组件实例的使用。
//src/components/Confirm/Confirm . vue
脚本
导出默认值{
姓名：确认，
道具：{
标题：{
类型：字符串，
默认值：“提示”
},
消息：{
类型：字符串，
默认值：“默认提示信息”
},
confirmBtnText: {
类型：字符串，
默认值：“确认”
},
cancelbtnttext:{
类型：字符串，
默认值：“取消”
},
onConfirm: {
类型：功能，
默认值：()={}
},
onCancel: {
类型：功能，
默认值：()={}
}
}
}
/脚本
在同一个目录下新建一个index.js文件，通过props将onConfirm、onCancel等参数传递给组件，这样就可以在实例中接收到事件回调。
//src/components/Confirm/index . js
从“vue”导入{ createApp }
“导入确认自”。/确认
函数确认({标题，消息，确认文本，取消文本}) {
返回新承诺((解决，拒绝)={
//实例化组件，createApp的第二个参数是props
const Confirm instance=create app(Confirm，{
Title: title 提示，
Message: message 确认消息，
ConfimbtnText:ConfimbtnText OK ，
cancelbtnttext:cancelbtnttext Cancel ，
onConfirm: ()={
卸载()
解决()
},
onCancel: ()={
卸载()
拒绝(新错误())
}
})
//卸载组件
const unmount=()={
confirmInstance.unmount()
document . body . remove child(parent node)
}
//创建一个装载容器
const parent node=document . createelement( div )
document . body . appendchild(parent node)
//安装组件
confirm instance . mount(parent node)
})
}
导出默认确认
使用组件
setup () {
const showConfirm=()={
确认({
标题：标题，
消息：“内容”
}).然后(()={
Console.log(单击确定)
}).catch(()={
Console.log(单击取消)
})
}
返回{
显示确认
}
}
3. 实现效果展示
总结
关于使用Vue3实现一个可以被js调用的组件的这篇文章到此为止。有关Vue3实现js调用的组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。