Vue的组件化

组件化步骤

1、创建Vue组件

const school = Vue.extend({
	template:
	`<div>
		<h2>学校名称{{schoolName}}</h2>
		<h2>学校地址{{schoolAddress}}</h2>
	</div>`,
	data(){
		return {
			schoolName:'xx小学',
			schoolAddress:'shandong'
		}
	}
})

2、注册Vue组件

new Vue({
	el:'root',
	components:{
		school,
		student
	}
})

3、使用Vue组件

<school></school>

第二步，也可以全局注册组件

Vue.component('school',school);

内置关系

只要是函数，里边都有一个prototype属性。【显示原型属性】

function Demo(){
	this.a = 1;
	this.b = 2;
}
const d = new Demo();
console.log(Demo.prototype) //显示原型属性
console.log(d.__proto__);  隐式原型属性
Demo.prototype.x = 99;
VueComponent.prototype.__proto__ === Vue.prototype

VueComponent.prototype.proto === Vue.prototype为什么要有这个？

让组件实例对象VueComponent(VC)可以访问到Vue原型上的属性和方法。

Vue.prototype.x=99;
VC中可以获取this.x

 单文件组件

xxx.vue文件，里边只认三种标签 <template> <script> <style> 分别代表html js css

案例:School.vue

<template>
	<div class="demo">
		xxxxxxxxxxxxxxxxxxxxxx
	</div>
</template>
<script>
	export default{
		name:'School',
		data(){
			return{
				schoolName:'xxx'
			}
		},
		methods:{
			showName(){
				
			}
		}
	}
</script>
<style>
	.demo{
		
	}
</style>

App.vue 【引入School.vue Student.vue】

template标签里边，必须有根元素，Div

main.js

import App from './App.vue'
new Vue({
	el:'root',
	components:{
		App
	},
})

index.html，注意先后顺序

<div id="root">
	<App></App>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./main.js"></script>