Vue中使用组件

三大步骤：

一、定义组件（创建组件）

 二、注册组件

 三、使用组件（写组件标签）

  一、如何定义一个组件？

                使用Vue.extend(options)创建，其中options和new Vue(options)时传入的哪个optins几乎一样，但也有点区别：

                区别如下：

                    1.el不要写，为什么？—— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务要哪个容器。

                    2.data必须写成函数，为什么？—— 避免组件被复用时，数据存在引用关系。

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

            二、如何注册组件？

                    1.局部注册：靠new Vue的时候传入compoents选项

                    2.全局注册：靠Vue.component('组件名',组件)

            三、编写组件标签：

                <组合名></组件名>

几个注意点：

1.关于组件名:

                   （1） 一个单词组成:

                        第一种写法(首字母小写):school

                        第二种写法(首字母大写):school

                    （2）多个单词组成:

                        第一种写法(kabab-case命名):my-school

                        第二种写法(CamelCase命名):MySchool(需要Vue脚手架)

                    备注:

                        (1).组件名尽可能回避HTML中已有的元素名称:例如:h2 H2都不行

                        (2).可以使用name配置项指定组件在开发者工具中呈现的名字

2.关于组件标签:

                    第一种写法:<组件名></组件名>

                    第二种写法:<组件名/>

                    备注:不用脚手架时,<组件名/>会导致后续组件不能渲染
 

                3.一个简写方式:

                    const school = Vue.extend(optons) 可简写为 const school = {optios}（Vue在解析时会自动调用Vue.extend方法创建组件）