vue3封装组件,请说下封装 vue 组件的过程
这篇文章主要介绍了vue3.0实现插件封装的方法，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
最近公司有一个新的项目，项目框架是我来负责搭建的，所以果断选择了Vue3.x ts不同于vue2.x，他们两的插件封装方式完全不一样。由于项目中需要用到自定义提示框，所以想着自己封装一个10 .vue 2。x提供了一个延伸的全局方法。那么vue3.x是不是也会提供什么方法呢？果然从vue3.x源码中还是找到了。插件封装的方法，还是分为两步。
1、组件准备
按照vue3.x的组件风格封装一个自定义提示框组件。在小道具属性中定义好。需要传入的数据流。
模板
div v-show=visible class=模型容器
div class=自定义-确认
div class= custom-confirm-header " { title } }/div
自定义-确认-正文 v-html= content /div
div class=自定义-确认-页脚
Button @ click=处理ok { { ok text } }/Button
Button @ click= handle cancel { cancel text } }/Button
/div
/div
/div
/模板
脚本语言
从“vue”导入{ defineComponent，watch，reactive，onMounted，onUnmounted，tore fs }。
导出默认定义组件({
名称：电子邮件，
道具：{
标题：{
类型：字符串，
默认值： ,
},
内容：{
类型：字符串，
默认值： ,
},
okText: {
类型：字符串，
默认值： 确定，
},
取消文本：{
类型：字符串，
默认值： 取消，
},
好的：{
类型：功能，
},
取消：{
类型：功能，
},
},
设置（道具、上下文){
恒定状态=反应({
可见：假，
});
函数handleCancel() {
state.visible=false
道具。取消道具。取消();
}
函数handleOk() {
state.visible=false
道具。ok道具。ok()；
}
返回{
.toRefs(州),
handleOk，
手柄取消，
};
},
});
/脚本
2、插件注册
这个才是插件封装的重点。不过代码量非常少，只有那么核心的几行。主要是调用了vue3.x中的创建节点创建虚拟节点，然后调用提出方法将虚拟节点渲染成真实节点。并挂在到真实节点上。本质上就是vue3.x源码中的增加操作。
从“vue”导入{ createVNode，render }；
从“vue”导入类型{ App }；
从""导入MessageConstructor ./index.vue
常数body=document.body
常量消息：any=函数(选项：任何){
const modelDom=body。查询选择器(`。容器_消息`)
if(modelDom){
body.removeChild(modelDom)
}
options.visible=true
const容器=文档。createelement( div )
集装箱。class name= container _ message
//创建虚拟节点
const vm=createVNode(
消息构造函数
选项，
)
//渲染虚拟节点
渲染（虚拟机，容器)
document.body.appendChild(容器);
}
导出默认值{
//组件祖册
安装（应用程序：应用程序):无效{
app。配置。全局属性。$ Message=消息
}
}
插件封装完整地址。源码位置————包/运行时核心/src/apiCreateApp中的createAppAPI函数中的增加方法。
以上就是vue3.0实现插件封装的详细内容，更多关于某视频剪辑软件插件封装的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。