目录
组件
页面布局的本质是盒子,盒子就是标签
页面布局的本质是盒子,盒子就是组件
概念:
组件就是功能模块的封装
组件是构成页面中独立结构单元,组件主要以独立页面结构形式存在,不同组件也具有基本交互功能。
功能模块:一个页面分成三个层
结构层、表现层、行为层
一个组件的基本步骤:定义,引入,注册,使用。
组件的定义:
当使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的 .vue 文件中,这被叫做单文件组件 (简称 SFC)
组件注册:
组件的使用需要用import引入,然后通过components来注册组件,然后组件的使用,和标签一样。组件将会以其注册时的名字作为模板中的标签名。
组件注册还分为全局注册和局部注册:
全局注册
一个全局的变量,可以在任意的组件使用;任何“页面”都可以使用,比如“导航栏”
注册方法:先引入,然后使用app.component()方法,app.component()方法可以被链式调用。
全局注册虽然很方便,但有以下几个问题:
- 全局注册,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中。
- 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。
- 相比之下,局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确,并且对 tree-shaking 更加友好
局部注册
方法:使用components选项;
SFC:Single-File-Component
Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。