Vue组件化 ==＞局部组件定义及全局组件定义

1 、组件化

组件是可复用的 Vue 实例，且带有一个自定义标签名字，项目中把组件作为自

定义元素来使用

组件构成： 将项目中可能被重复使用的页面结构 ，转换为 vue 的 一个组件实

例，以组件组合的方式 构成 整个项目结构 ，或将特殊实现功能封装成组件进行

特殊调用

在 vue 语法下

组件：基于 vue 语法构成具有固定的页面结构、样式、功能代码的特殊 vue 实例

，这个特殊实例可以以自定义标签方式在 vue 中被重复调用

组件化：将一个完整项目拆分成多个 vue 组件，以组件组合和复用的方式构成整

个项目页面

1.1 、局部组件定义

局部组件构建依赖于一个固定的 vue 实例配置，通过配置实例属性

components:{} 定义

局部组件仅限构建 vue 实例的容器范围中使用

语法构成 ： components:{ name:definition,…… }

参数 ：

name (string) : 定义组件唯一名称，在页面中作为组件调用的标签名；

definition (Object) ：描述组件的相关配置特性（等效 Vue.createApp 的

options 参数）

用法 ：

注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

/*

        局部组件定义

            - 局部组件构建依赖于一个固定的 vue 实例配置，通过配置实例属性 components:{} 定义

            - 局部组件仅限构建vue实例的容器范围中使用

            - 语法构成：components:{ name:definition,…… }

                    + name 为对象属性名用于描述 组件名称 -> 当前组件的自定义标签名

                                                       -> 组件名称如果是驼峰规则需要将标签名转为连字符格式

                    + definition 为对象的属性取值描述 组件定义的相关配置

                        => 取值 Object-->等同于 createApp(options) options 配置

            - vue构建的组件是不能通过应用方式挂载的，vue将组件描述成自定义标签，通过自定义标签指向完成组件的挂载调用

            - vue的组件,实际上就是一个vue的实例对象,具有完成的vue响应式功能和页面操作，包含独立生命周期钩子函数，并且实例和实例之间相互独立

                !! 响应式 功能的隔离（数据、方法、生命周期钩子函数……）

            - 组件作为组件标签被调用只能在另外一个vue实例的容器中才会生效，所以vue项目必须是由一个开发者通过createApp 构建的实例进行启动，该实例被叫做Root实例

            - 组件标签本质上是由HTML自定义标签演化而来，最终会以vue语法进行渲染和操作，但渲染操作之前仍然是标签，所有支持vue的模板语法调用

                ！！ 部分模板语法在组件上具有不同的执行效果；部分模板语法在组件上没有实际应用价值

        */

 
    
    
    

    

        
容器模板-msg-{{ msg }}
        
        
        
       
        
        
容器模板
    

    

 
          
         


         Vue.createApp({ components:{ 
         "ComponentA":{ /* ... */ }
         "component-b":{ /* ... */ } } })

局部组件之间的嵌套：

        
容器模板
         
        
容器模板
    

    
  
    

    

1.2 、全局组件定义

全局组件的定义，依赖于 Vue 构造函数提供的全局组件定义函数

app.component()

定义的全局组件，可以在项目的 任意位置进行使用

语法构成 ：

参数 ：

name(string) : 定义组件唯一名称，在页面中作为组件调用的标签名

definition (Function | Object) ：描述组件的相关配置特性

用法 ：

注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

 
         
        

     const app = Vue.createApp({/* ... */}).mount("#app"); 
     app.component("CompoentA", definition) 
     app.component("compoent-b", definition)

    

        
容器模板
        
        
        
容器模板