Vue.js中的组件系统

由于vue.js是一个框架，它不能简单地完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍了一个使用vue.js进行页面布局的强大工具——vue . js组件系统。

Vue.js组件系统

每一项新技术都是为解决特定问题而诞生的。组件的出现是为了解决页面布局等一系列问题。vue中有两种组件：全局组件和本地组件。

组件注册

全球组件注册

在通过Vue.component()创建了一个全局组件之后，我们可以将这个组件用作通过新Vue创建的Vue根实例中的自定义元素。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue . min . js '/script/head body div id=' app '！-第二步，使用-global _ component/global _ component/div script//第一步，注册vue.component(' global _ component '，{ template : ` div H2 hello vue/H2/div `})；new Vue({ el: '#app '，})；/脚本/正文/html组件的参数

因为组件是可重用的Vue实例，所以它们接收与新Vue相同的选项，例如数据、计算、观察、方法和生命周期挂钩。唯一的例外是根实例特定的选项，如el。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue . min . js '/script/head body div id=' app '！-第二步，使用-global _ component/global _ component/div script//第一步，注册vue.component(' global _ component '，{ data : function(){ return { count : 0 0 } }，template : ` button v-: click=' count '你点击了我{{ count }}次。/button `})；new Vue({ el: '#app '，})；重用/脚本/正文/html组件

每个实例都维护自己独立的数据。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue . min . js '/script/head body div id=' app '！-第二步，使用-global _ component/global _ component global _ component/global _ component/div script//第一步，Register vue.component(' global _ component '，{ data : function(){ return { count :0 } }，template 3360 ` button v-: click=' count '你点击了我{{count}}次。/button `})；new Vue({ el: '#app '，})；/script/body/html注意，当单击一个按钮时，每个组件都独立地保持其计数。因为每次使用组件时，都会创建一个新的实例。

数据必须是一个函数

数据必须是一个函数，因此每个实例都可以维护返回对象的独立副本，或者可以按如下方式编写

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue . min . js '/script/head body div id=' app '！-第二步，使用-global _ component/global _ component global _ component/global _ component/div script//第一步，Register vue.component(' global _ component '，{ data(){ return { count : 0 0 } }，template 3360 ` button v-: click=' count '你点击了我{{count}}次。/button `})；new Vue({ el: '#app '，})；本地组件的/script/body/html注册

全球注册往往不理想。例如，如果您使用像webpack这样的构建系统，全局注册所有组件意味着即使您不再使用某个组件，它仍然会包含在最终的构建结果中。这导致用户下载的JavaScript不必要的增加。

除非程序结束，否则全局组件始终存在。如果组件越来越大，程序占用的空间和消耗的性能也会越来越大。

所以我们需要本地组件。不用时，用垃圾回收。

使用本地组件的第一种方法

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue。量滴js '/脚本/头体div id=' component-demo '！-最后在根元素当中使用它- !-第一个中使用方式，会把当前差异渲染进DOM - my-header/my-header /div脚本//定义一个局部组件，其实就是一个变量，它是一个目标类型//属性与全局组件是一样的let Header={ template : ` button @ click=' count ' { count } }/button `，data(){ return { count : 0 } }；新Vue({ el: '#component-demo '，//第二部，需要在根实例当中使用它组件： { ' my-Header ' : Header } })；/脚本/正文/html局部组件的第二种使用方式

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue。量滴js '/脚本/头体div id='组件-演示'/div脚本/定义一个局部组件，其实就是一个变量，它是一个目标类型//属性与全局组件是一样的let Header={ template : ` button @ click=' count ' { count } }/button `，data(){ return { count : 0 } }；新Vue({ el: '#component-demo '，//第二种使用方式，不会将差异渲染进多姆，以模板为根元素模板：“我的标题/我的标题”,//第二步，需要在根实例当中使用它组件： { ' my-Header ' : Header } })；/脚本/正文/html对于成分对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

在局部组件中使用子组件

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue。量滴js /脚本样式正文{ margin : 0；} .盒子{宽度： 100%；高度： 50px背景-颜色： # 2 Abd 2}/style/head body div id=' component-demo '/div script//定义一个局部组件，其实就是一个变量，它是一个目标类型//这个对象的属性与全局组件是一样的（除埃尔属性外)让f content={ template : ` div span这是头条/span/div ` }；let Header={ template : ` div v-bind : class=' { box : isBox } ' button @ click=' count ' { count } }/button first-content/first-content/div `，data(){ return { count : 0 0，isBox: true } }，components 3360 { ' first-content ' : fcont } }；新Vue({ el: '#component-demo '，//第二种使用方式，不会将差异渲染进多姆，以模板为根元素模板：“我的标题/我的标题”,//第二步，需要在根实例当中使用它组件： { ' my-Header ' : Header } })；/脚本/正文/html注：

1.注意写组件标签

2.每个组件的模板只识别一个作用域块

通信

父子组件的通信

在父组件中给子组件绑定属性，子组件通过道具=['属性名称]

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue。量滴js /脚本样式正文{ margin : 0；} .盒子{宽度： 100%；高度： 50px背景-颜色： # 2 Abd 2}/style/head body div id=' component-demo '/div script//定义一个局部组件，其实就是一个变量，它是一个目标类型//属性与全局组件是一样的让f内容={ template : ` div span这是头条/span {{ fdata }} /div `，道具s 3360[' fdata ']}；let Header={ template : ` div v-bind : class=' { box : isBox } ' button @ click=' count ' { count } }/button first-content : fdata=' fathData '/first-content/div `，data(){ return { count : 0 0 0，isBox: true，fathData: '我是你爸爸~~' }，组件3360 { '第一内容' : Fcontent } }新Vue({ el: '#component-demo '，//第二种使用方式，不会将差异渲染进多姆，以模板为根元素模板：“我的标题/我的标题”,//第二步，需要在根实例当中使用它组件： { ' my-Header ' : Header } })；/脚本/正文/html子父组件的通信

父组件在安装好的的时候，监听一个自定义事件。

给子组件绑定一个点击事件之后，通过内建的方法$emit在父组件上触发一个事件，这个时间就是父组件监听的自定义事件。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue。量滴js /脚本样式正文{ margin : 0；} .盒子{宽度： 100%；高度： 50px背景-颜色： # 2 Abd 2}/style/head body div id=' component-demo '/div script//定义一个局部组件，其实就是一个变量，它是一个目标类型//属性与全局组件是一样的让f内容={ template : ` div按钮v-: click=' my click '放大父组件字体/button/div `, methods : { my click : function(){ console。日志(这个)；这个$emit('change-font '，0.1)；console.log(此);} } };let Header={ template : ` div v-bind : class=' { box : isBox } ' first-content v-: change-font=' change font '/first-content span : style=' { font size : postFontSize ' em ' } ' Hello Vue/span/div `，data() { return { count:isBox: true，fathData: '我是你爸爸~~ '，postFontSize: 1 } }，组件3360 { ' first-content ' : Fcontent }，方法： { ChangeFont3360 function(value){ this。PostFontSize=值；} } };const VM=new Vue({ El : ' # component-demo '，//第二种使用方式，不会将差异渲染进多姆，以模板为根元素模板：“我的标题/我的标题”,//第二步，需要在根实例当中使用它组件： { ' my-Header ' : Header } })；/脚本/正文/html非父子通信

其中一个组件向中间调度器提交事件，另一个组件监听中间调度器的事件

混入

混入可以提高代码的重用性。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue。js '/脚本/头体div id=' mixin-demo ' my-Alex/my-Alex p/p my-Pei qi/my-Pei qi/div脚本让mixs={ methods : { show : function(name){ console。日志(`$ { name }在这里！`);}，hide:函数(名称){ console.log(`${name}不见了！`);}, } };让myAlex={ template : ` div button @ click=' show '(' Alex ')点我显示亚历克斯/按钮按钮@点击='隐藏'('亚历克斯')点我隐藏Alex/button/div `，mixin :[mix]，}；让myPeiqi={ template : ` div button @鼠标输入=' show '(' peiqi ')鼠标移入显示沛齐/button button @鼠标左键=' hide '(' Pei qi ')鼠标离开隐藏沛齐/button/div `，mixin :[mix]，}；新Vue({ el: '#mixin-demo '，组件： { ' my-Alex ' : myAlex，' my-peiqi': myPeiqi，} })/脚本/正文/html插槽

有时候我们需要向组件传递一些数据，这时候可以使用插槽。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style .导航链接{宽度： 100像素；高度： 100像素；背景-颜色： # 2 Abd 2向左浮动：左边距左： 5px文本对齐：中心；线高： 100像素；}/样式脚本src='http:/statics/vue。js '/脚本/头体div id=' app 01 ' com-content登录/com-内容表示“同”内容注册/com-内容表示“同”内容最热/com-内容表示“同”内容段子/com-content com-content42区/com-内容表示“同”内容图片/com-content/div脚本Vue。组件(' com-content '，{ template : ` div class=' nav-link ' slot/slot/div ` })；new Vue({ el: '#app01 '，}) /script/body/html具名插槽

操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style。nav-link { width : 100 px；高度： 100像素；背景-color : # 2 Abd 2；向左浮动：左边距left: 5px文本对齐：中心；线高： 100 px；}/stylescript src=' http:/statics/vue . js '/script/head body div id=' app01 ' base-layout Template slot=' header ' h1这是标题栏/h1/Template template h2这是内容/H2/模板模板slot=' footer' H3这是页脚/H3/模板/base-layout/div script let base layout={ Template 3360 ' div class=' container ' header slot name=' header '/slot/header main lot/slot/main footer slot name=' footer '/slot/footer/div ` `；Newvue ({el:' # app01 '，components 3360 { ' base-layout ' : baseliayout } })/script/body/html我们仍然可以保留一个未命名的插槽，这是默认的插槽，也就是说，它将作为所有与插槽不匹配的内容的统一出口。

在组件上使用v型

自定义事件也可以用来创建支持v-model的自定义输入组件。记住：

输入v-model='searchText '

相当于：

输入v-bind : value=' search text ' v-: input=' search text=$ event . target . value '

当在组件上使用时，v型如下所示：

自定义输入v-bind:值=' search text ' v-:输入=' search text=$ event '/自定义输入为了使其正常工作，此组件中的输入必须是：

将其值属性绑定到一个正确的命名值，并在其输入事件被触发时通过自定义输入事件抛出一个新值

写完代码后，看起来是这样的：

Vue.component ('custom-input '，{ prop s 3360[' value ']，template 3360 ` input v-bind : value=' value ' v-: input=' $ emit '(' input '，$ event.target.value)' `)

自定义输入v-model=' search text '/自定义输入

以下是在组件中使用v-model示例：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue . min . js '/script/head body div id=' app '/div script let Model={ template : ` div input v-bind : value=' value ' v-: input=' $ emit(' input '，$ event . target . value)'/h1 { { value } }/h1 `，prop 3360[' value ']}；let App={ template: ` div自定义输入v-Model=' search text '/自定义输入`，components: { '自定义输入' : Model，}，data(){ return { searchText: ' '，} } }；Newvue ({el:' # app '，template 3360 ' app/app `，components: { app，} })/script/body/html使用组件的注意事项

注1:单根元素

当构建一个内容页面的组件时，我们的组件可能包含多个HTML标签。

h1 hello world/h1 H2 hello we/H2但是，如果您尝试在模板中编写这个，Vue将显示一个错误，并解释每个组件必须有一个根元素。您可以通过将模板的内容包装在父元素中来解决此问题，例如：

div h1 hello world/h1 H2 hello UE/H2/div注2:解析特殊的HTML元素

一些HTML元素，如ul、ol、table和select，对哪些元素可以出现在其中有严格的限制。而某些元素，如li、tr和option，只能出现在某些其他元素中。

当我们使用这些约束元素时，这将导致一些问题。例如：

表blog-post-row/blog-post-row/table，一个自定义的组件，会作为无效内容提升到外部，导致最终的渲染结果出现错误。幸运的是，这个特殊的is特性给了我们一个解决方法：

表tr=' blog-post-row '/tr/table应该注意的是，如果我们使用来自以下来源的模板，则不存在此限制：

字符串(例如，template: ' . ')单文件组件(。vue)script type=' text/x-template '

使用组件实现路飞导航条

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :/statics/vue。量滴js /脚本！-引入样式- link rel='样式表href=' https://unpkg。com/element-ui/lib/theme-粉笔/index.css！-引入组件库-script src=' http :https://unpkg。com/element-ui/lib/index。js '/脚本样式正文{ margin : 0；padd : 0；} .标题{位置：固定；top : 0；左： 0；宽度： 100%;} .El-menu { display : flex；align-items:居中；正义-内容：中心；} .页脚{位置：固定；底部： 0；左： 0；宽度： 100%;} .标题img { position : absolute eleft : 80pxtop :-4px；宽度： 118像素；高度： 70pxz指数： 999；}/style/head body div id=' app '/div模板id=' header ' div class=' header ' img src=' http :https://www .lufycity。com/static/img/head-logo。a7 ced F3。SVG '/El-菜单：默认-活动='活动索引'类=' El-菜单-演示'模式='水平' El-菜单项索引=' 1 '首页/El-菜单项埃尔-菜单项索引='2 '免费课程/El-菜单项埃尔-菜单项索引='3 '轻课/El-菜单项埃尔-菜单项索引='4 '学位课程/El-菜单项埃尔-菜单项索引='5 '智能题库/El-菜单项埃尔-菜单项索引='6 '公开课/El-菜单项埃尔-菜单项索引='7 '内部教材/El-菜单项埃尔-菜单项索引='8 '老男孩教育/El-菜单项/El-菜单/div/模板id=' footer ' div class=' footer ' El-菜单类=' El-菜单-演示'模式='水平'背景色='黑色' El-菜单项索引='1 '关于我们/El-菜单项埃尔-菜单项索引='2 '联系我们/El-菜单项埃尔-菜单项索引='3 '商业合作/El-菜单项埃尔-菜单项索引='4 '帮助中心/El-菜单项埃尔-菜单项索引='5 '意见反馈/El-菜单项埃尔-菜单项索引='6 '新手指南/El-菜单项/El-菜单/div/模板脚本让page header={ template : ' # header '，data(){ return { active index : ' 1 '，} } }；让page Footer={ template : ' # Footer '，}；let App={ template : ` div page-header/page-header/div page-footer/page-footer/div/div `，组件3360 { ' page-header ' : page-header，' page-footer ' : page-footer，} }；新Vue({ el: '#app '，模板： ' App/App '，组件： { 'app': App，} })/脚本/正文/html效果图：

总结

以上所述是小编给大家介绍的Vue.js中的组件系统，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！