Vue使用组件的三大步骤：
一、定义组件（创建组件） 二、注册组件 三、使用组件（写组件标签）一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下： 1.el不写，why?---最终的所有的组件都要被一个vm管理，由vm中的el决定服务哪个容器 2.data必须写成函数，why?---避免组件被复用时，数据存在引用关系 备注：使用template可以配置组件结构 二、如何组测组件？ 1.局部组测：靠new Vue的时候传入components选项 2.全局注册：靠Vue.component('组件名'，组件) 三、编写组件标签： <school></school>
代码练习：
第一步:创建组件
第二步：注册组件
局部注册：
全局注册：
第三步：编写组件标签
几个注意点：
1.关于组件名： 一个单词组成： 第一种写法（首字母小写）：school 第二种写法（首字母大写）：School 多个单词组成： 第一种写法（kebab-case命名）：my-school 第二种写法 (CamelCase命名)： MySchool（需要Vue脚手架支持） 备注： （1）组件名尽可能回避HTML已有的元素名称，例如：H2、h2都不行 （2）可以使用name配置项指定组件在开发者工具中呈现的名字2.关于组件标签：
第一种写法：<school></school> 第二种写法：<school/> 备注：不使用脚手架时，<school/>会导致后续组件不能渲染 3.一个简写方式： const shool = Vue.extend(options) 可简写为 const shool = options定义一个总的组件：
实例代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>组件的嵌套</title>
8 <script type="text/javascript" src="../js/vue.js"></script>
9 </head>
10 <body>
11 <!-- 准备好一个容器 -->
12 <div id="root">
13 <!--编写组件标签-->
14 <app></app>
15 </div>
16 </body>
17 <script type="text/javascript">
18 Vue.config.productionTips = false //阻止vue在启动时生成生产提示
19 //定义student组件
20 const student = Vue.extend({
21 name:'student',
22 template:`
23 <div>
24 <h2>学生名称:{{name}}</h2>
25 <h2>学生年龄:{{age}}</h2>
26 </div>
27 `,
28 data(){
29 return {
30 name:'王麻子',
31 age:18
32 }
33 }
34 })
35 //定义school组件
36 const school = Vue.extend({
37 name:'school',
38 template:`
39 <div>
40 <h2>学校名称:{{name}}</h2>
41 <h2>学校地址:{{address}}</h2>
42 <student></student>
43 </div>
44 `,
45 data(){
46 return {
47 name:'尚硅谷',
48 address:'上海'
49 }
50 },
51 //注册组件（局部）
52 components:{
53 student
54 }
55 })
56 //定义hello组件(与student平级)
57 const hello = Vue.extend({
58 template:`<h1>{{msg}}</h1> `,
59 data(){
60 return {
61 msg:'欢迎学习Vue'
62 }
63 }
64 })
65 //定义app组件
66 const app = Vue.extend({
67 template:`
68 <div>
69 <hello></hello>
70 <school></school>
71 </div>
72 `,
73 components:{
74 school,
75 hello
76 }
77 })
78 //创建vm
79 new Vue({
80 //template:`<app></app>`,(相当于容器里面的编写组件标签<app></app)
81 el:'#root',
82 //注册组件(局部注册)
83 components:{app}
84 })
85 </script>
86 </html>