基本使用
Vue中使用组件的三大步骤：
一，定义组件（创建组件）
二，注册组件
三，使用组件（写组件标签）
一，如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
区别如下：
1. el 不要写，为什么？--最终的所有组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
2. data必须写成函数式，为什么？--避免组件被复用时，数据存在引用关系（防止数据紊乱）
备注：可以使用template配置组件结构
二，如何注册组件？
1. 局部注册：靠 new Vue 的时候传入components选项
2. 全局注册：靠 Vue.component('组件名',组件)
三，编写组件标签;
<组件标签></组件标签>
测试
<body>
<div id="root">
<school></school>
<hr>
<student></student>
<test></test>
</div>
<script>
Vue.config.productionTip = false;
const school = Vue.extend({
template: `
<div>
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
</div>
`,
data(){
return {
name:"lin",
address:"江西"
}
}
});
const student = Vue.extend({
template:`
<div>
<h1>学生名称：{{name}}</h1>
<h1>学生年龄：{{age}}</h1>
</div>
`,
data(){
return{
name:"刘少杰",
age:20
}
}
})
const test = Vue.extend({
template:`
<div>
<h1>在此测试全局注册组件</h1>
</div>
`
})
//全局注册组件
Vue.component("school",school);
Vue.component("test",test);
new Vue({
el: "#root",
components:{
school,
student
}
})
</script>
</body>
需要注意的点
几个注意点：
1.关于组件名：
一个单词组成：
第一种写法（首字母小写）:school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法(CamelCase命名)：MySchool(需要Vue脚手架支持)
备注：
1. 组件名尽量回避HTML中已有的元素名称，例如：h2,H2 都不行
2. 可以使用name配置项指定组件在开发者工具中呈现的名字
2. 关于组件标签
第一种写法<school></school>
第二种写法<school/>
注意：不使用脚手架时，<school/>会导致后续组件不能渲染
3. 一个简写方式
const school = Vue.extend(options) 可简写成： const school = options(Vue底层会自动帮我们使用Vue.extend（）)
演示组件嵌套
<body>
<!--
在vue的根容器中，创建一个组件（app），来统领所有组件
-->
<div id="root">
</div>
<script>
Vue.config.productionTip = false;
//要先加载student，才能加载school组件
const student = {
name: "liu",
template: `
<div>
<h1>学生名称：{{name}}</h1>
<h1>学生年龄：{{age}}</h1>
</div>
`,
data() {
return {
name: "刘少杰",
age: 20
}
}
}
const school = Vue.extend({
template: `
<div>
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
<student></student>
</div>
`,
data() {
return {
name: "lin",
address: "江西"
}
},
components: {
student
}
});
const hello = {
template: `<div>
<span>{{msg}}</span>
</div>`,
data() {
return {
msg: "你好",
}
}
}
const app = Vue.extend({
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: {
hello,
school
}
})
new Vue({
template: `<app></app>`,
el: "#root",
components: {
app
}
})
</script>
</body>
