Vue中注册全局组件的三种方式
更新时间:2023年11月17日 10:29:06 作者:Kratial
这篇文章主要介绍了Vue中注册全局组件的三种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1.方式一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue组件的注册</title> <script src="../vue.js"></script> </head> <body> <template id="Mydemo"> <h1>Hello Time</h1> </template> <div id="app"> <account></account> </div> <script> //注册全局组件 Vue.component('account',{ template:"#Mydemo", }) new Vue({ el:"#app", }) </script> </body> </html>
2.方式二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue组件的注册</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <say-hello></say-hello> </div> <script> //注册全局组件 Vue.component('say-hello',{ template:"<h2>Hello everyone</h2>", }); //根实例 new Vue({ el:"#app", }) </script> </body> </html>
3.方式三:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue组件的注册</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <my-list></my-list> </div> <script> var list=Vue.extend({ template:'<h1>this is a list</h1>', }); Vue.component("my-list",list); //根实例 new Vue({ el:"#app", }) </script> </body> </html>
到此这篇关于Vue中注册全局组件的三种方式的文章就介绍到这了,更多相关vue注册全局组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vant-ui AddressEdit地址编辑和van-area的用法说明
这篇文章主要介绍了vant-ui AddressEdit地址编辑和van-area的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11
最新评论