一、定义组件（创建组件）
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
// 1、定义组件（创建组件）：定义student组件
const student = Vue.extend({
// 可以简写成如下形式：
// const student = ({
template: `
<div>
<p style="color: red">学生姓名： {{ studentName }}</p>
<p>性别： {{ studentSex }}</p>
<button @click="showStudentName">点我显示学生姓名</button>
</div>
`,
// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件
// 都要被一个vm管理，由vm决定服务于哪个容器。
data() {
return {
studentName: "Luca",
studentSex: "男"
}
},
methods: {
showStudentName() {
alert(this.studentName);
},
},
});
二、注册组件
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component(‘组件名’,组件)
// 2、注册组件（全局注册）
Vue.component('student', student);
// 首先创建vm
const vm = new Vue({
el: "#app",
// 2、注册组件（局部注册）
components: {
// 说明：第一个student为注册的组件名，第二个student为定义的组件名
// student: student,
student,
},
});
三、使用组件（写组件标签）
<组件名>,</组件名>
<!-- 3、使用组件（书写组件的标签） -->
<student></student>
<hr>
<student></student>
<hr>
<student></student>
四、完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的基本使用</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3、使用组件（书写组件的标签） -->
<student></student>
<hr>
<student></student>
<hr>
<student></student>
</div>
<script>
// 1、定义组件（创建组件）：定义student组件
const student = Vue.extend({
// 可以简写成如下形式：
// const student = ({
template: `
<div>
<p style="color: red">学生姓名： {{ studentName }}</p>
<p>性别： {{ studentSex }}</p>
<button @click="showStudentName">点我显示学生姓名</button>
</div>
`,
// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件
// 都要被一个vm管理，由vm决定服务于哪个容器。
data() {
return {
studentName: "Luca",
studentSex: "男"
}
},
methods: {
showStudentName() {
alert(this.studentName);
},
},
});
// 2、注册组件（全局注册）
Vue.component('student', student);
// 首先创建vm
const vm = new Vue({
el: "#app",
// 2、注册组件（局部注册）
components: {
// 说明：第一个student为注册的组件名，第二个student为定义的组件名
// student: student,
student,
},
});
</script>
</body>
</html>
