基于vue3.x开发插件,封装使用插件
请关注我们的官方组件基于vue3.0无ts实现zmz-ui3组件库
在vue2.0中我们常常使用Vue.extend
构造器来载入对象挂载到dom树之上。
而在vue3.0中我们发现Vue.extend
消失不见了,
vue3.0中,我们发现官方提供的createVNode
,通过这个api,我们可以把我们创建的dom树通过render
生成模板来挂载,而我们可以通过如下方式:
const vm = createVNode(组件对象)
render(vm, container)
这个element节点必须存在我们才能挂载,就如入口main.js中的渲染实例挂载到#app上一样,所以我们要先生存标签再去挂载dom节点如下方式:
container = document.createElement('div');
container.className = 'zmz-loadingbar';
const vm = createVNode(组件对象)
render(vm, container)
我们运行以后发现,怎么没有变化,是不是产生了很多问号。
这样是因为我们虽然创建的dom节点,但是我们没有把它渲染,所以我们要把我们创建的div标签,className为zmz-loadingbar标签的渲染到我们想要的地方,这里我们这个组件是一个全局的所有我们渲染到了与#app平级的地方如图
我们在指定的执行方法中挂载
container = document.createElement('div');
container.className = 'zmz-loadingbar';
const vm = createVNode(组件对象)
render(vm, container)
document.body.appendChild(container)
而后在我们指定的地方进行组件卸载
document.body.removeChild(container)
container = null
我们在vue2.0中发现组件的挂载通过Vue.extend
返回函数对象,通过$mount就可以获取dom树,而vue3.0插件中我们必须要指定一个地方去提供挂载。
对比上一篇文章我们发现
通过createApp实现的组件挂载卸载,标签上回携带data-v-app标志,而通过此篇标签上不存在,这个是应为我们通过app内部组件进行挂载生成的,而我们这个方法是直接渲染的dom节点生成的,不足之处请谅解。
本文地址:https://www.zhuimengzhu.com/details/454.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。