组件的两种编写形式

组件

1、什么是组件

实现应用中局部功能代码和资源的集合
代码：HTML，CSS，JS，，
资源：mp3, mp4, ttf, .zip

2、组件与传统编程的区别

传统方式编写应用存在问题：

1. 依赖关系混乱，不好维护
2. 代码复用率不高
   模块化编程优点：
   复用代码，简化项目编码，提高运行效率

组件的两种编写形式

1、单文件组件

一个文件中只包含一个组件，组件类型为XX.vue
优点：条理清晰，代码易维护

2、非单文件组件

• 含义：一个文件中包含有N个组件

• Vue中使用组件的三步骤：

  1. 定义组件（创建组件）

  //创建school组件
  const school = Vue.extend({
  	name:'school',
  	template:'
  		<div>
  			<h2>学校名称{name}</h2>
  		</div>
  	',
  	data(){
  		return{
  			name:'建大'
  		}
  	}
  })
  

  2. 注册组件
     • 局部注册：new Vue的时候传入components:{}选项
     • 全局注册：Vue.component(‘组件名’,组件)

  //创建vm
  new Vue({
  	el:'#root',
  	components:{
  		school
  	}
  })
  

3. 使用组件

   <div id='root'>
   	<school></school>
   </div>
   

实例对象

1. VueComponent构造函数
   1. school组件本身是一个名为VueComponent的构造函数，是Vue.extend生成的。
   2. 我们只需要写 <school> </school> 或者<school> ，Vue解析时会帮我们创建school组件的实例对象，即执行new VueComponent(options)。
   3. 注意：每次调用Vue.extend，返回的都是一个全新的VueComponent。
   4. school组件中，data,methods,watch,compute中的this都指向school的实例对象，记vc(VueComponent)，也可称为组件实例对象
   5. Vue实例对象，记vm
   6. 被vm管理的vc，即注册在vm中的vc，console.log(vm)，可以在vm下的$children属性中找到被管理的vc。
2. vc和vm的区别
   1. new vc时，里面不能写el；new vm时，里面可以写el
   2. new vc时，里面的data必须写成函数的形式；new vm时，data可以是对象类型，也可以是函数

原型对象

一个重要的内置关系：VueComponent.prototype._proto_ === Vue.prototype
作用：让组件实例对象都可以访问到Vue原型上的属性、方法。

//定义一个构造函数
function Demo(){
	this.a=1
}

const d=new Demo()
console.log(Demo.prototype)//显式原型属性
console.log(d._proto_)//隐式原型属性
console.log(Demo.prototype===d._proto_)//true
//程序员用显式原型属性放东西，程序执行时顺隐式原型属性去取这个东西
Demo.prototype.x=9
console.log(d.x)//输出9，原理：先查找d中定义的普通属性，只有a,没有x,就去_proto_属性下找x

总结：
实例的隐式原型属性永远指向自己的缔造者的原型对象。
Vue上有显式原型属性prototype，vm是Vue的实例，有隐式原型属性_proto_，他们都共同指向Vue原型对象，Vue原型对象又是object类型，所以也会有隐式原型属性_proto_，指向Object原型对象；
VueComponent上显示原型属性prototype和其实例（记作vc）的隐式原型_proto_同时指向VueComponent原型对象，VueComponent原型对象的_proto_属性又指向Vue原型对象，最终指向Object原型对象。