组件是Vue.js中的一个重要概念,它是一种抽象,是一个可以复用的Vue.js实例。它拥有独一无二的组件名称,可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。 在大多数系统网页中,网页都包含header、body、footer等部分,很多情况下,同一个系统中的多个页面,可能仅仅是页面中body部分显示的内容不同,因此,这里就可以将系统中重复出现的页面元素设计成一个个组件,当需要使用的时候,引用这个组件即可。 在为组件命名的时候,需要使用多个单词的组合,例如组件可以命名为todo-item、todo-list。但Vue.js中的内置组件例外,不需要使用单词的组合,例如内置组件名称App、<transition>和<component>。这样做可以避免自定义组件的名称与现有的Vue.js内置组件名称以及未来的HTML元素相冲突,因为所有的HTML元素的名称都是单个单词。 在Vue.js中创建一个新的组件之后,为了能在模板中使用,这些组件必须先进行注册以便Vue.js能够识别。在Vue.js中有两种组件的注册类型:全局注册和局部注册。 6.2.1 全局注册 全局注册组件使用应用程序实例的component()方法来注册组件。该方法有两个参数,第一个参数是组件的名称,第二个参数是函数对象或者选项对象。语法格式如下: app.component({string}name,{Function|Object} definition(optional)) 因为组件最后会被解析成自定义的HTML代码,所以可以直接在HTML中将组件名称作为标签来使用。全局注册组件示例如下。 【例6.1】 全局注册组件(源代码\ch06\6.1.html)。
运行上述程序,按F12键打开控制台并切换到Elements选项卡,效果如图6-1所示。 从控制台中可以看到,自定义的组件已经被解析成了HTML元素。需要注意一个问题,当采用小驼峰(myCom)的方式命名组件时,在使用这个组件的时候,需要将大写字母改为小写字母,同时两个字母之间需要使用“-”进行连接,例如<my-com>。 6.2.2 局部注册 有些时候,注册的组件只想在一个Vue.js实例中使用,这时可以使用局部注册的方式注册组件。在Vue.js实例中,可以通过components选项注册仅在当前实例作用域下可用的组件。 【例6.2】 局部注册组件(源代码\ch06\6.2.html)。
运行上述程序,单击数字按钮将会逐步递减数字,效果如图6-2所示。 本文节选自《Vue.js 3.x+Element Plus从入门到精通(视频教学版)》,获出版社和作者授权发布。 |
原文地址:https://blog.csdn.net/brucexia/article/details/136862370
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://www.msipo.com/article-657699.html 如若内容造成侵权/违法违规/事实不符,请联系MSIPO邮箱:3448751423@qq.com进行投诉反馈,一经查实,立即删除!
Copyright © 2024, msipo.com