一、组件

什么是组件化？

之前开发页面的时候，在html中编写代码。比如一个首页，你们的首页html代码都放到一个文件中去。导航单独拆分开来，形成组件。输入框形成组件。左边分类形成组件。轮播图形成组件。UI组件（包含js逻辑），大大提升开发效率，提高代码的复用性。

模块化？一个js文件就是一个模块

前端开发进入了组件化、模块化、工程化。

1.1 在Vue中怎么定义组件

语法:

1.1.1全局定义

Vue.component('名称', {})

Vue.component('search', {
            // template
            template: "<div><input placeholder='请输入内容'/></div>"
        })

template里面写html代码，组件模板里面只能写一个根元素。（不能写两个div）,方法写在template里面，template在哪，方法就写在哪。

在组件里面vue能写的除了data和el其他都是相同的写法。el不能写，data写成函数。

面试题：为什么组件data使用函数，而Vue里面data写成对象和函数都可以使用？

组件里面如果是对象，那么修改的时候就全部修改，为了保证组件内部独立性，就使用函数。

data(){
    return{
msg:"helloword"
            }
    }

使用组件

  <div id="app">
        <my-header></my-header>
        <!-- 这是搜索框  -->
        <!-- 
            2.使用组件
         -->
        <search></search>
    </div>

注意：全局定义UI组件(自定义标签)

名称? 不可以和html及其html5的标签重复

如果组件定义的时候，名称使用了驼峰命名，那么在使用的时候驼峰的英文单词中间使用- ，并且大写要改成小写。

1.1.2局部定义

局部组件

1.创建组件(组件就是一个实例对象)

let myHeaader={

template:"<div>搜索</div>"

}

2.引用(注册)组件

const app = new Vue({

    el:"#app",

        data:{

    },

components:{

    myHeader//注册一下

    }

})

3.使用组件

<div id="app">
        <!-- 
            3.使用组件
         -->
        <my-header></my-header>
    </div>

组件全局定义和局部定义