概念：局部功能或代码的集合
1.使用组件的三个步骤
（1）定义（创建组件）
（2）注册组件
（3）使用组件（写组件标签）
2. 如何定义一个组件
使用Vue.extend(options)创建，其中options 和 new Vue(options)传入的options几乎一致，区别如下：
（1）组件中不写el，因为最终所有的组件都要经过一个vm管理，由vm中的 el决定服务于哪个容器；
（2）data必须写成函数，避免组件被复用时数据存在引用关系；
注：使用template可以配置组件结构
3. 如何注册组件
（1）局部注册：new Vue()时传入components选项；
（2）全局注册：Vue.component('组件名', 组件位置)
4. 编写组件标签
<demo></demo>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 3.组件标签 -->
<hello></hello>
<hr>
<school></school>
<hr>
<student></student>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//1.创建组件
//school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">学校信息</button>
</div>
`,
data() {
return {
schoolName: '家里蹲',
address: '北京'
}
},
methods: {
showName() {
alert(this.schoolName)
}
}
})
//student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
studentName: '孙笑川',
age: 33
}
}
})
//hello组件
const hello = Vue.extend({
template: `
<div>
<h2>你好</h2>
</div>
`
})
//2.全局注册组件
Vue.component('hello', hello)
//创建Vue实例
new Vue({
el: '#root',
//2.注册组件（局部注册）
components: {
school,student
}
})
</script>
</body>
</html>5. 几个注意事项
（1）组件名：
一个单词组成：
- 首字母小写 demo
- 首字母大写 Demo
多个单词组成
- kebab-case：my-demo
- CamelCase（大驼峰）：MyDemo（需在vue-cli脚手架环境中）
- 注：组件名尽可能回避html关键字；可以使用name配置项指定组件的名称
（2）组件标签
- 第一种写法：
第二种写法：<demo/>
==注：第二种写法如果不在脚手架环境中，会导致后续组件无法渲染==
（3）简写形式
const demo = Vue.extend(options) 可简写为：const demo = options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>几个注意的点</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{msg}}</h2>
<school></school>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data() {
return {
schoolName: '家里蹲',
address: '北京'
}
}
})
//创建Vue实例
new Vue({
el: '#root',
data: {
msg: '几个注意的点'
},
components: {
school
}
})
</script>
</body>
</html>6. VueComponent
（1）demo组件本质是一个名为VueComponent的构造函数，由Vue.extend生成；
（2）只需写<demo> 或 <demo></demo>，Vue解析时会帮我们创建demo组件的实例对象；
（3）每次调用Vue.extend，返回的都是一个全新的VueComponent
（4）关于this指向
- 组件配置中：data，methods，watch，computed等函数中，它们的this指向均是VueComponent
new Vue(options)配置中：data，methods，watch，computed等函数中，它们的this指向均是Vue实例对象
（5）VueComponent简称组件实例对象（vc）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的嵌套</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<app></app>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
studentName: '孙笑川',
age: 33
}
}
})
//school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
schoolName: '家里蹲',
address: '北京'
}
},
components: {
student
}
})
//hello组件
const hello = Vue.extend({
template: `
<div>
<h2>你好</h2>
</div>
`
})
const app = Vue.extend({
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: {
school,hello
}
})
//创建Vue实例
new Vue({
el: '#root',
//注册组件
components: {
app
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueComponent</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data() {
return {
schoolName: '家里蹲',
address: '北京'
}
}
})
console.log(school)
//创建Vue实例
new Vue({
el: '#root',
components: {
school
}
})
</script>
</body>
</html>7. 一个重要的内置关系
VueComponent.prototype.__proto__ === Vue.prototype为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个重要的内置关系</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- vm与vc严格来说不能划等号，vc与vm接收相同的选项，如data，computed，watch，methods以及生命周期钩子函数等，但像el这样的根实例配置项仅vm有
一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法
-->
<div id="root">
<school></school>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
Vue.prototype.x = 99;
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data() {
return {
schoolName: '家里蹲',
address: '北京'
}
}
})
console.log(school.prototype.__proto__.x)
/* //定义一个构造函数
function Demo() {
this.a = 1;
this.b = 2;
}
//创建一个demo的实例对象
const c = new Demo();
//显示原型属性
console.log(Demo.prototype);
//隐式原型属性
console.log(c.__proto__);
console.log(Demo.prototype === c.__proto__);
//通过显示原型属性操作原型对象，追加一个属性
Demo.prototype.x = 99; */
</script>
</body>
</html>
评论 (0)