VUE——组件

目录

组件

     概念：

      组件的定义：

      组件注册：

       全局注册

       局部注册

       SFC:Single-File-Component

父向子传值

静态&动态传值

类型约束&函数校验

单向数据流

子向父传值

透传（Attributes）

插槽

动态组件

路由

组件

             页面布局的本质是盒子，盒子就是标签

             页面布局的本质是盒子，盒子就是组件

     概念：

        组件就是功能模块的封装

        组件是构成页面中独立结构单元，组件主要以独立页面结构形式存在，不同组件也具有基本交互功能。

       功能模块：一个页面分成三个层

       结构层、表现层、行为层

      

        一个组件的基本步骤：定义，引入，注册，使用。

      组件的定义：

       当使用构建步骤时，我们一般会将 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 组件的模板、逻辑与样式封装在单个文件中。