「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

来到组件的学习，首先我们要了解什么是Vue组件。还不知道的同学可以先了解什么是组件在来学习组件的使用。

我的总结：组件就是可复用的Vue实例。

使用组件的三大步骤：

首先第一步: 定义组件（创建组件）

第二步： 注册组件

第三步： 使用组件（写组件标签）

第一步，定义组件，我们以school组件为例，创建school组件。

const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{addres}}</h2>
            </div>
        `,
        //el:'#root',
        data(){
            return{
                schoolName:'上海交大',
                addres:'上海'
            }
        }

定义组件时我们需要使用Vue.extend 创建。另外，一个完整的组件需要有结构和数据才能完整有效。

组件结构： 那么组件的结构我们使用template，但是要写在“ `` ” 里边。其他的结构还和html一样，由开发者自定义

组件数据 组件的数据我们依然使用data保存，但是要注意的是，这里的data我们要写成函数形式，因为我们在使用组件时为了每一次调用组件，Vue都会给我们一个新的组件数据，这样避免组件被重复使用时，数据存在引用关系。那么多次调用组件数据就不会相互影响。

第二步：注册组件

注册的组件有 全局组件 和 局部组件 两种。

1.局部组件

所谓局部组件就是只有指定注册的vm才可以管理此组件，我们继续以school组件为例，来注册school组件。

new Vue({
        el:'#root',
        components:{
            xx:school,
            student
        }
    })

注册局部组件时使用new Vue传入components。其中xx和xs组件标签对应组件名，或者我们可以直接用组件名代替，两种方式都可以。中重要的是el归属于root。

2.全局组件

于局部组件不同的是全局组件不使用components直接使用Vue.component('school',school),这样全局组件就创建完成我们可以在全局调用他。

Vue.component('schoolo',school)

第三步：使用组件（编写组件标签）

1.局部组件使用

<div id="root">
        <xx></xx>
        <hr>
        <xs></xs>
    </div>

2.全局组件使用

<div id="root1">
        <xx></xx>
</div>

全局组件可以在如何地方调用。

本章总结：

中使用组件三大步骤：

一.定义组件（创建组件）
        
二.注册组件
        
三.使用组件（写组件标签）

一，如何定义一个组件？

使用Vue.extend（options）创建，其中options和new Vue（option）时传入的那个option几乎一样，但也有区别：
             区别如下：
            1.el不要写--- 最终所有的组件都要经过一个vm管理，由vm决定服务哪个容器
            2.data必须写成函数（保存组件数据）--- 避免组件被重复使用时，数据存在引用关系

            备注：
                使用template可以配置组件结构

    二，如何注册组件？
        1.局部注册：使用new Vue的时候传入components
        2.全局注册：使用new.component('组件名',组件)

    三，编写组件标签
        <xx></xx>