一,创建好各个组件
二,在根组件中使用:
<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进行处理,从而完成一个页面的开发!就像上图一样,每一个色块都代表一个组件,组件又可以由许多子组件构成,层层叠叠地构成完整地页面。