就是将可以复用的模块提取为独立个体, 解决依赖关系混乱,复用率不高的问题
组件: 实现应用中局部功能代码和资源的集合
分三步
const comp = Vue.extend({
template:``,
data(){
return {
}
},
methods:{}
// 组件内容
})
new Vue({
el:"#root",
components:{
comp,
//或
zujian: comp
}
})
// Vue.component(组件名称,组件文件位置)
Vue.component("comp",comp)
<ele>ele>
<zujian>zujian>
'my-comp':comp
或者MySchool:comp
(第二种需要脚手架)name
,那无论注册和使用时写的是什么名字,最终在Vue开发者工具中都是配置的name(一般都是些大型项目时使用,防止多个组件注册为相同名字容易混乱)
,但需要在脚手架环境下const comp = {}
就是套娃
注意: 子组件需要在父组件前创建,不然会报错找不到
const compChild = Vue.extend({
//...
})
const compParent = Vue.extend({
//...
components:{
compChild,
}
})
开发中通常会创建一个app组件,他管理着所有下级组件, 而由vm来控制他
- 组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
- 我们只需要写
,Vue解析时就会帮我们创建school组件的实例对象, 即Vue帮我们执行的
new VueComponent(options)
- 特别注意: 每次调用Vue.extend, 返回的都是一个全新的VueComponent
- 关于this指向:
(1). 组件配置中:
data函数,methods中的函数,watch中的函数,computed中的函数 他们的this均是VueComponent实例对象
(2). new Vue()配置中:
data函数,methods中的函数,watch中的函数,computed中的函数 他们的this均是Vue实例对象- VueComponent的实例对象,以后简称vc(也可以称之为: 组件实例对象)
Vue的实例对象,以后简称vm
创建了一个school组件,将组件输出到控制台
// school组件
const school = Vue.extend({
name: 'school',
template: `My school is {{name}}
`,
data() {
return {
name: '天津科技大学',
}
},
})
console.log('@', school)
<div id="root">
<school>school>
<school>school>
div>
可以看到下面内容
来到vue.js找到VueComponent函数,添加一个输出
var Sub = function VueComponent(options) {
console.log('调用了VueComponent')
this._init(options)
}
可以看到,因为使用了两个school组件,所以掉了两边VueComponent
再输出vm到控制台,可以看到vm.$children下有两个VueComponent实例对象
官网说明两者关系
类似于两个孪生兄弟,虽然基本相似,但也有细微不同之处,因此两者不能画等号
VueComponent.prototype.__proto__ === Vue.prototype
目的是为了让组件实例对象(vc)可以方位到Vue原型上的属性和方法
首先需要了解两个属性
function Demo() {
this.a = 1
this.b = 2
}
const d = new Demo()
console.log(Demo.prototype) // 方法都会有 显示原型属性
console.log(d.__proto__) // 对象都会有 隐式原型属性
两者指向的皆是Demo原型对象(原型对象是不是可以理解为就是类)
对Demo原型对象进行操作
// 通过对象的显示原型属性操作原型对象,追加一个x属性
Demo.prototype.x = 99
console.log('d.__proto__.x:', d.__proto__.x)
console.log('d.x:', d.x) //在对象上没找到,会主动顺着隐式原型链进行查找
输出相同
顺着链找到尽头就是Object原型对象,而Object.__proto__
为null
类比Vue和VueComponent就如下图所示
需要注意的是VueComponent的原型对象的__proto__
并不是指向Object原型对象,而是特意指向了Vue的原型对象
之前写的html文件都是非单文件组件,
而单文件组件后缀名是.vue
但是web并不能直接识别vue文件,需要进行再处理和加工
有两种方法:
一般文件名是使用大驼峰
单文件组件基本框架
<template>template>
<script>script>
<style>style>
接着来模拟一个项目
首先是组件,写了两个组件
内容不重要,就粘出School.vue
<template>
<div class="demo">
<h2>学校名称:{{ name }}h2>
<h2>学校地址:{{ address }}h2>
div>
template>
<script>
export default {
name: 'School',
data() {
return {
name: '天津科技大学',
address: '天津市第十三大街',
};
},
};
script>
<style>
.demo {
background-color: #5097e8;
color: white;
}
style>
其中js部分是简写, 原始完整的应该是
<script>
const school = Vue.extend({
name: 'School',
data() {
return {
name: '天津科技大学',
address: '天津市第十三大街',
};
},
});
export default school; //默认导出
script>
组件定义好后,需要建一个App.vue
来管理所有组件
<template>
<div>
<School>School>
<Student>Student>
div>
template>
<script>
import School from './School.vue';
import Student from './Student.vue';
export default {
components: {
School,
Student,
},
};
script>
<style>
style>
接下来就需要创建vm了,创建一个main.js文件,创建vm并引入和使用App标签
/**
* 入口文件
* 创建vm
*/
import App from './App.vue'
new Vue({
el: '#root',
template: ` `,
components: { App },
})
接着来弄vm的模板,创建index.html文件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div id="root">div>
<script type="text/javascript" src="../../js/vue.js">script>
<script type="text/javascript" src="./main.js">script>
body>
html>
OK, 项目框架就初步形成了,来运行!
报错 因为浏览器不支持es6的import,需要脚手架了
欲知后事如何,下篇文章见~
下一篇:vue-cli 脚手架