这篇文章主要介绍了vue3.0实现插件封装的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
最近公司有一个新的项目，项目框架是我来负责搭建的，所以果断选择了Vue3.x+ts。vue3.x不同于vue2.x，他们两的插件封装方式完全不一样。由于项目中需要用到自定义提示框,所以想着自己封装一个。vue2.x提供了一个vue.extend的全局方法。那么vue3.x是不是也会提供什么方法呢?果然从vue3.x源码中还是找到了。插件封装的方法，还是分为两步。
1、组件准备
按照vue3.x的组件风格封装一个自定义提示框组件。在props属性中定义好。需要传入的数据流。
<div class="model-container"> <div class="custom-confirm"> <div class="custom-confirm-header">{{ title }}</div><div class="custom-confirm-body"></div><div class="custom-confirm-footer"> <button>{{ okText }}</button><button>{{ cancelText }}</button></div></div></div>
2、插件注册
这个才是插件封装的重点。不过代码量非常少，只有那么核心的几行。主要是调用了vue3.x中的createVNode创建虚拟节点，然后调用render方法将虚拟节点渲染成真实节点。并挂在到真实节点上。本质上就是vue3.x源码中的mount操作。
import { createVNo<b style="color:transparent">本文来源gao@!dai!ma.com搞$$代^@码!网!</b>de, render } from 'vue'; import type {App} from "vue"; import MessageConstructor from './index.vue' const body=document.body; const Message: any= function(options:any){ const modelDom=body.querySelector(`.container_message`) if(modelDom){ body.removeChild(modelDom) } options.visible=true; const container = document.createElement('div') container.className = `container_message` //创建虚拟节点 const vm = createVNode( MessageConstructor, options, ) //渲染虚拟节点 render(vm, container) document.body.appendChild(container); } export default { //组件祖册 install(app: App): void { app.config.globalProperties.$message = Message } }
插件封装完整地址。源码位置――――packages/runtime-core/src/apiCreateApp中的createAppAPI函数中的mount方法。
以上就是vue3.0实现插件封装的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue3.0实现插件封装
转载请注明原文链接：vue3.0实现插件封装
