1.模块与组件
*模块：向外提供特定功能的js程序，一般就是一个js文件
*组件：用来实现局部功能效果的代码集合
2.非单文件组件
*非单文件组件：一个文件中包含有n个组件
*使用组件步骤：创建组件->注册组件->使用组件
<body>
<div id="root">
<!-- 使用组件 -->
<school></school>
<hr>
<student></student>
</div>
<script>
//创建school组件(组件不能写el配置项)
const sch=Vue.extend({
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京"
}
},
template:
`<div>
<h2>学校名称：{{schoolName}}</h2><br>
<h2>学校地址：{{schoolAddress}}</h2><br>
</div>`
})
//创建student组件
const stu=Vue.extend({
data() {
return {
studentName:"桃桃",
studentAge:23
}
},
template:
`<div>
<h2>学生姓名：{{studentName}}</h2><br>
<h2>学生年龄：{{studentAge}}</h2><br>
</div>`
})
//创建组件的简写形式
// const stu={
// data() {
// return {
// studentName:"桃桃",
// studentAge:23
// }
// },
// template:
// `<div>
// <h2>学生姓名：{{studentName}}</h2><br>
// <h2>学生年龄：{{studentAge}}</h2><br>
// </div>`
// }
//全局注册组件,写在new Vue之前
Vue.component('school',sch)
new Vue({
el:"#root",
//注册组件,key:value（局部注册）
components:{
//school:sch,
student:stu
}
})
//全局注册组件
Vue.component('school',sch)
</script>
</body>3.组件嵌套
<body>
<div id="root">
<!-- //使用组件 -->
<app></app>
</div>
<script>
//创建学生组件
const stu=Vue.extend({
data() {
return {
studentName:"张三",
studentAge:23
}
},
template:`
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{studentAge}}</h2>
</div>
`
})
//创建学校组件
const sch=Vue.extend({
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京"
}
},
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{schoolAddress}}</h2>
<!-- //使用子组件 -->
<stu></stu>
</div>
`,
//注册该组件的子组件
components:{
stu
}
})
//创建hello组件
const hello=Vue.extend({
template:'<h2>hello</h2>'
})
//创建app组件
const app=Vue.extend({
components:{
sch,
hello
},
template:`
<div>
<sch></sch>
<hello></hello>
</div>`
})
//创建vue实例
new Vue({
el:"#root",
//注册组件
components:{
app
}
})
</script>
</body>
4.VueComponent构造函数
*school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
*只需要写<school/>或<school></school>，Vue解析时会创建school组件的实例对象，即Vue执行：
new VueComponent(options)。
*特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
*关于this指向：
(1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
5.单文件组件
*单文件组件：一个文件中只包含有1个组件，以.vue命名
*安装插件Vetur，解析.vue文件
<template>
<div class="sch">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{schoolAddress}}</h2>
<h2>学生人数：{{num}}</h2>
<button v-on:click="add">点击学生人数+1</button>
</div>
</template>
//组件交互相关的代码
<script>
export default {
name:"School",
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京",
num:1
}
},
methods: {
add(){
this.num++
}
},
}
</script>
//组件的样式
<style>
.sch{
background-color: aqua;
}
</style>// 组件的结构
<template>
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
</template>
//组件交互相关的代码
<script>
export default {
name:"Student",
data() {
return {
name:"张三",
age:23
}
}
}
</script>//App.vue
<template>
<div>
<school></school>
<student></student>
</div>
</template>
<script>
//引入组件
import School from "./School.vue"
import Student from "./Student.vue"
export default {
name:"App",
components:{
School,
Student
}
}
</script>
