宿松网站建设推荐秒搜科技,最好的一站式家装公司,网络工程师的前景,电路板东莞网站建设何为组件 组件化的概念已经提出了很多年了#xff0c;但是何为组件呢#xff1f;组件有啥优势#xff1f;本文将会做出解答#xff0c;首先我们需要弄清楚何为组件。在VUE的官网中的解释是#xff1a; 组件允许我们将 UI 划分为独立的、可重用的部分#xff0c;并且可以对…何为组件 组件化的概念已经提出了很多年了但是何为组件呢组件有啥优势本文将会做出解答首先我们需要弄清楚何为组件。在VUE的官网中的解释是 组件允许我们将 UI 划分为独立的、可重用的部分并且可以对每个部分进行单独的思考。 我觉得这个解释很官方不好理解我的理解是组件其实就是完成一个功能的每一个模块的封装比如我们要完成一个购物APP我们设计完APP的架构后需要把各个部分组件化比如登录模块、直播模块、支付模块、购物车模块、商详模块…等等这些每一个模块就可以称为是一个组件他们是独立于APP的每个模块都可以单独进行自己的开发不会影响到其他模块但是模块之间可以进行通信共同完成一个功能。这样的好处就是APP可裁剪假如我们现在要开发一个新的购物VIP APP专门给特定人群使用我们不需要再重新开发只复用我们开发过的这些模块就可以快速搭建一个新的APP了。 VUE3中也提供了组件的实现如下图所示(图片来自VUE官网) 我们可以将一个页面拆成多个模块每个模块就可以称为一个组件,这些组件具有复用性在其他页面也可能会使用到所以将其抽成一个组件当我们在其他地方需要使用相似的UI展示效果时可以重用这些组件快速搭建新的界面。
示例解析
在VUE中可以使用components来声明一个组件声明的组件分为两种一种是全局组件一种是局部组件。我们可以简单实现两个组件一个是计数器名为counter点击计数器的值可进行加一操作一个是div组件名为hello- world,显示“hello world”。下面我们分别看下如何定义全局组件和局部组件以及他们的区别。
全局组件 全局组件优点只要定义了处处可以使用。 。 缺点性能不高 注意全局组件的名称建议使用小写字母单词中间使用“-”分隔
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://unpkg.com/vuenext/scripttitle组件/title
/head
bodydiv idroot/div
/bodyscriptconst app Vue.createApp({template:divcounter //divdivhello-world //div});//定义全局组件app.component(hello-world,{template:divhello world/div});app.component(counter,{data() {return {count:1}},template:div clickcount1{{count}}/div});const vm app.mount(#root);
/script
/html如上面的代码所示定义全局组件的时候可以使用app.component{组件名{组件实现}}的方式,定义完后就可以像使用div标签那样使用组件了。 局部组件 局部组件定义了局部组件后需要注册之后才能使用优点是性能比较高缺点是使用起来比较麻烦 注定义局部组件的时候会声明一个局部变量这个变量的名字建议使用大写字母开头驼峰命名局部组件使用时需要做一个组件名字和组件间的映射
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://unpkg.com/vuenext/scripttitle组件/title
/head
bodydiv idroot/div
/bodyscript// //局部组件const Counter {data(){return {count:1}},template:div clickcount 1{{count}}/div};const HelloWorld {//定义局部组件时首字母大写使用驼峰命名template:divhello world/div};const app Vue.createApp({components:{counter:Counter,hello-world:HelloWorld}, //定义局部组件必须使用这个template:divcounter //divdivhello-world //div});const vm app.mount(#root);
/script
/html如上面代码所示定义局部组件的时候使用的方式是const XxxYy {组件实现};使用的时候先注册做一个组件和名字的映射然后再使用就行了使用和全局组件相同 components:{counter:Counter,hello-world:HelloWorld}, //定义局部组件必须使用这个运行截图 总结
本文主要介绍了组件的概念和VUE3中定义和使用组件的方法。看完本文读者应该能了解到全局组件和局部组件的定义和使用方法以及他们之间的区别。组件具有复用性全局组件只要定义了处处都可以使用而且使用很简单但是性能不高局部组件定义后需要注册餐能使用而且使用起来相对麻烦但是性能比较高。
