vue组件化的基本使用

一，创建好各个组件

二，在根组件中使用：

<template>
  <div >
     <my-addition></my-addition>
	 </hr>
	 <my-subtraction></my-subtraction>
  </div>
</template>

<script>
	//导入两个组件
	import Addition from './components/Addition.vue'
	import Subtraction from './components/Subtraction.vue'
	export default{
     
     
		data(){
     
     
			return{
     
     }
		},
		//将这两个组件注册为根组件的子组件
		components:{
     
     
			'my-addition':Addition,
			'my-subtraction':Subtraction
		}
	}
</script>

<style>
</style>

三，小小小小的总结

什么叫组件，就是自成一个体系的，包含html，css,js的一个模块。
当一个个小小的完成各个模块的组件建立起来后，就可以在页面上进行排列组合，从而形成纷繁复杂的页面了！

又因为每个组件又被注册为html标签，于是在最外面的根组件中，它们又可以利用html，css,js进行处理，从而完成一个页面的开发！就像上图一样，每一个色块都代表一个组件，组件又可以由许多子组件构成，层层叠叠地构成完整地页面。