组件：组件是用来实现局部功能的代码和资源的集合
Vue中使用组件的三个步骤：
定义组件
const 组件名 = Vue.extend({
template:`
<div>
组件代码
</div>`,
data(){
return {
组件代码赋值
}
}，
mounted(){
......
}
})
案例：
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{{ studentName }}</h2>
<h2>学生年龄:{{ age }}</h2>
</div>`,
data() {
return {
studentName: '张三',
age: 20
}
},
mounted() {
console.log(this)
},
})
注册组件
const vm = new Vue({
data(){
return {}
},
methods:{},
components: {
要注册地组件名
}
})；
案例：
const vm = new Vue({
data() {
return {}
},
methods: {},
components: {
school
}
});
使用组件
<div id="root">
<school></school>
<student></student>
</div>
组件使用注册的完整案例（包括从组件中注册另一个组件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
<school></school>
<student></student>
</div>
<script src="js/vue2.7.15.js"></script>
<script type="text/javascript">
const student = Vue.extend({
template:`
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div> `,
data(){
return{
studentName: '张三',
age: 30
}
},
mounted(){
console.log(this)
},
})
console.log(student)
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{{ schoolName }}</h2>
<h2>学校地址:{{ address }}</h2>
<hr/>
<student></student>
</div>`,
data() {
return {
schoolName: "猿究院",
address: '太白南路'
}
},
components: {
student
}
});
const vm = new Vue({
data(){
return{
}
},
methods: {},
components:{
school
}
});
vm.$mount("#root")
</script>
</body>
</html>
组件的注意事项：
没有el？
最终所有的组件都要经过vm的管理，由vm中的el来决定在那个容器中展示
组件名
第一种写法 ：首字母小写
第二种写法 ：首字母大写
多个单词 ：kebab-case my-school
? CamelCase MySchool
VueComponent：
组件本质是一个VueComponent 的构造函数，并不是我们创建的 ，是Vue .extend 生成的
组件在使用时Vue解析时会帮我们创建组件的实例对象，new VueComponent({…})，每次调用Vue .extend 都会返回一个全新的 VueComponent
VueComponent .prototype . _ proto _ === Vue .prototype