第二章 Vue的组件化编程
1.组件的基本认识(非单文件组件)
1.1 使用组件的三大步骤:
一、定义组件(创建组件)
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别(el、data)
//第一步:创建student组件
const student = Vue.extend({
template:`
//模板里必须要用根元素包裹
<div class="demo">
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
<button @click="showName">点我提示姓名</button>
</div>
`,
// el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。
data(){//必须写成函数形式
return {
studentName:'皓月',
age:'20'
}
},
methods: {
showName(){
alert(this.studentName)
}
},
})
二、注册组件
1.局部注册: 靠new Vue的时候传入components选项
//创建vm
new Vue({
el:'#root',
data:{
msg:'你好啊!'
},
//第二步:注册组件(局部注册)
components:{
//student:student的简写,key是组件名可以自己起 value是中转变量(组件地址)
student,
}
})
2.全局注册: 靠Vue.component(‘组件名’,组件)
Vue.component('student',student)
三、使用组件(写组件标签)
<div id='root'>
<!-- 第三步:编写组件标签 -->
<student></student>
</div>
1.2 Vue 组件 data 为什么必须是函数:
data
是一个函数的话,这样每复用一次组件,就会返回一份新的data
,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data
,就会造成一个变了全都会变的结果—— 避免组件被复用时,数据存在引用关系。
1.3 关于组件
1.关于组件名:
一个单词组成:
- 第一种写法(首字母小写):school
- 第二种写法(首字母大写):School(与vue开发者工具相呼应)
多个单词组成:
- 第一种写法(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
1.4 组件的嵌套
标准化开发:
app全称application是vm的根组件,用来管理应用中所有组件
注意: 所有子组件要放在父组件之前
实例:
<body>
<div id="root">
<app></app>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name: 'student',
template: `
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
name: '皓月',
age: '20'
}
}
})
//定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name: '哔哩大学',
address: '北京'
}
},
//注册组件(局部)
components: {
//student组件只能供school使用
student
}
})
//定义hello组件
const hello = Vue.extend({
template: `<h1>{{msg}}</h1>`,
data() {
return {
msg: '欢迎光临!'
}
}
})
//定义app组件
const app = Vue.extend({
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: {
school,
hello
}
})
//创建vm
new Vue({
//也可以在模板中调用
//template: '<app></app>',
el: '#root',
//注册组件(局部)
components: {
app
}
})
</script>
vue开发者工具中的效果:
2.VueComponent构造函数
示例:创建一个school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
`,
data() {
return {
name: '皓月',
address: '北京'
}
},
})
//创建vm
const vm = new Vue({
el: '#root',
components: {
school,
}
})
1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
console.log('@',school)
2.我们只需要写<school/>
或<school></school>
,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)
。
3.特别注意:每次调用Vue.extend
,返回的都是一个全新的VueComponent
Vue源码:
这里使用 function 声明了一个函数(VueComponent),每次调用产生的都是一个新的函数定义
4.关于this指向:
(1).组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
示例:
const school = Vue.extend({
name: 'school',
template: `
<div>
<button @click="showName">点我提示学校名</button>
</div>
`,
methods: {
showName() {
console.log('showName', this)
}
},
})
(2).new Vue(options)配置中:
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。 Vue的实例对象,以后简称vm。
vc和vm是一对双胞胎:vc有的功能vm都有,但vm有的功能vc不一定有——vm能通过el指定实例为哪个容器服务
3.Vue与VueComponent的内置关系
- 显式原型:prototype
- 隐式原型:
__proto__
原型: 每一个构造函数都有一个prototype属性指向一个对象,这个对象就是构造函数实例的原型
原型链: 每一个实例都有一个__proto__
属性指向的构造函数的原型对象,来获取原型对象上的属性和方法,构造函数的原型对象也有一个__proto__
属性指向另外一个原型对象,以此类推,直到原型链的最终端null为止,这样一层一层往上找就形成了原型链。
原型链精髓:实例的隐式原型属性,永远指向其缔造者的原型对象
特点: 实现继承 一个对象可以拿到另一个对象上的属性和方法
构造函数都有一个prototype属性,即显式原型(属性)指向原型对象
实例对象上有
__proto__
属性,即隐式原型(属性)指向原型原型对象都有一个consttuctor属性指向构造函数
构造函数new实例化实例对象
Vue与Component的关系:
Vue做了这样一件事情: 让本该指向Object的原型对象的VueComponent原型对象
的隐式原型属性指向Vue的原型对象——VueComponent原型对象的原型对象就是Vue的原型对象
4.单文件组件
1.什么是单文件组件: 文件名以.Vue结尾,包含HTML、js、css。
2基本结构:
<template>
//组件的结构
<div>
//写在template里的内容最外层必须要包裹一个标签
</div>
</template>
<script>
//组件交互相关的代码
//暴露出去才能使用
export default{
}
</script>
<stytle>
//组件的样式
</stytle>
<p style=“line-height: 20px; color: #ccc”> 版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 皓月u 原文链接:https://juejin.im/post/7026339401592471566