13.1，组件的概述

什么是组件

组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的主键，来划分不同的功能模块，将来我们需要什么样的功能，就就可以直接去调用对应的组件即可

组件化和模块化的不同

• 模块化，是从代码的逻辑角度划分的
• 组件化，是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用

如何定义全局组件

方式一

1. 使用Vue.extend来创建全局的Vue组件（全局)（template用于定义组件信息）

2. 使用Vue.component('组件的名称',创建出来的组件模板对象)

   组件的名称就是将来在引用时可以直接使用标签的形式引用

实例：

注意的是，在注册的时候，可以使用驼峰命名法，但是在使用的时候遇到驼峰，需要以-的形式解析

例如在注册时组件名称是myCode，那么他的标签就是“my-code”

直接创建

Vue.component('myCode',Vue.extend({
    template:"
这个使用第二种方式创建的html
"
}))

这一步，就相当于匿名的使用，直接将创建extend的对象拿过来放在一起使用

方式二

Vue.componse('myCode',{

    template:'
第二种方式创建组件
'

})

这种方式要简单一点

而且这样创建的组件，不能有两个平级的两个元素，也就是说在template中支持使用

这是第一个
这是第二个

使用一个div包裹一下

不允许使用这样

这是第一个
这是第二个

无论是哪种方式创建的组件，组件的template属性指向的模板内容必须有且只有一个根标签

方式三

将组件的template对应的模板结构丢在外面定义

具体使用：

1. 定义一个组件

   Vue.component('myCode1',{
    template:'#temp1'
   })
   

2. 在被el标记的标签的外部定义template的模板结构

注意点是，这个template的模板结构必须是在未定义的Vue信息外部定义

---

1556434715683.png

定义局部（私有）组件

这个时候就有下一个components组件

这种定义私有组件的形式的定义方法

components:{
    组件名:{
        template属性
    }
}

var vm=new Vue({
    el:'#app',
    data:{},
    components:{
        myCode:{
            template:'
哈哈哈哈哈
'
        }
    }
})

组件中的data和methods

1. 组件可以有自己的data
2. 组件的data和实例的data有点不一样，实例中的data可以是一个对象，但是组件中的data必须是一个方法
3. 组件的data除了必须是一个方法之外，这个方法内部，还必须返回一个对象才行
4. 组件中的data数据使用方式和实例中data的使用方式完全一样