Web前端 -----【Vue】（vue组件基础）一文带你了解组件的创建、注册、使用（包括组件的嵌套）

目录

前言

什么是组件

为什么使用组件化开发

组件的使用

组件的使用分为三个步骤

创建组件

为什么配置项中的data不能使用直接对象的形式，必须使用function（重点！！！面试喜欢问）

注册组件

使用组件

组件的嵌套

---

前言

本文介绍Vue组件，本文包括介绍如何创建组件、注册组件以及使用组件。并且包含组件的嵌套等内容

什么是组件

1. 组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用
2. 模块：一个大的js文件按照模块化拆分规则进行拆分，生成多个js文件，每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用
3. 任何一个组件都可以包含这些资源：HTML、CSS、JS、图片、声音、视频等。从这个角度也可以说明组件是可以包含模块的。

为什么使用组件化开发

1. 每一个组件都有独立的js,独立的css,这些独立的js和css只供当前组件使用，不存在从横交错，更加便于维护。
2. 代码复用性增强。组件不仅让js css复用了，html代码片段也复用了（因为要使用组件直接引入组件即可）

组件的使用

组件的使用分为三个步骤

1. 创建组件
2. 注册组件
3. 使用组件

创建组件

Vue.extend({该配置项和new Vue的配置项几乎相同，略有区别})

区别：

1. 创建Vue组件的时候，配置项不能使用el配置项（但是需要template配置项来配置模板语句）
2. 配置项中的data不能使用直接对象的形式，必须使用function。

例：

        
{{msg}}
        
    
    

为什么配置项中的data不能使用直接对象的形式，必须使用function（重点！！！面试喜欢问）

如果我们直接使用对象的形式，当每次使用组件时，都是共享一份数据，这样的话就会造成页面数据混乱。应该是每个组件有自己独立的数据data，而我们使用function可以保证每次调用时，return返回的数据对象都不一样，这样就保证了数据的独立性，不会造成页面数据混乱

例

定义一个data，以对象的形式。a和b都指向data

let data ={

            num:1

         }

         let a = data

         let b = data

我们通过a.num和b.num直接访问

a修改data中的num为2,再通过b查看时，num已经变成了2。当b想使用num的数据时已经被修改了，所以会导致页面数据混乱

同理，将data改为funtion函数,a,b都是调用data函数

function data(){

            return {

                num:1

            }

         }

         let a = data()

         let b = data()

直接访问num

由图可以知道，当a修改data中的num为2时，b调用num依旧为1，互不影响。这样就不会造成页面数据混乱。所以配置项中的data不能使用直接对象的形式，必须使用function。

注册组件

注册组件分为局部注册和全局注册

局部注册：

在配置项当中使用components,语法格式：

components:{

        组件的名字：组件对象

}

全局注册：

Vue.component('组件的名字'，组件对象)

使用组件

<组件的名字>

局部注册：

使用受限，只能在el配置项的容器中使用

        
{{msg}}
        
    
    

全局注册：

可以在不同的容器中使用

 

        
{{msg}}
        
    
    

        
{{msg}}
        
    
    

注册时可以在创建组件时，可以省略Vue.extend()

const myComponent = {

            template:`

           


            


           {{index}}-----{{item.name}}

            

            

            `,

            data(){

                return {

                    users:[

                    {id:'01',name:'zhangsan'},

                    {id:'02',name:'lisi'},

                    {id:'03',name:'wangwu'},

                ]

                }

            }

        }

        Vue.component('mylist',myComponent)

在注册时，底层会调用Vue.extend()方法，myComponent相当于一个对象传给底层去处理

组件的嵌套

如上图，最上面的就是Vue实例，第二层就是Vue实例挂载的组件，第三层就是组件的嵌套，组件挂载的组件。组件的嵌套就是给创建好的组件继续向下挂载组件，而不是挂载在Vue实例身上

如上代码，组件的嵌套也是先要遵循三步，创建，注册，使用。在哪个身上注册就要在身上应用。为了便捷，可以将组件名和组件对象同名，在对象中，key:value相同可以省略value，直接key名即可

       

   

   

如图，在Vue实例身上挂载了组件root,在组件身上挂载了x和y两个组件。这样组件的嵌套就完成了