关键词：
组件的定义、组件之间的衔接

1.组件的定义

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

2.组件之间的衔接

step1：在新建的子组件根目录下新建一个.vue文件

1
2
3
4
5
6
7
8
9
10
11
<template>
      <div class="shopcart"></div>
</template>
<script type="text/ecmascript-6">
    export default{};
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

step2：在主组件下引入该子组件

1
2
3
4
5
6
7
8
9
10
11
<template>
    <div class="goods"></div>
</template>
<script type="text/ecmascript-6">
    import cartconcontrol from 'components/shopcart/shopcart.vue';
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

step3：在主组件下注册子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div class="goods"></div>
</template>
<script type="text/ecmascript-6">
    import cartconcontrol from 'components/shopcart/shopcart.vue';
	
	components:{
        shopcart
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

step4：在主组件的模块中以自定义元素 的形式使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div class="goods"></div>
    <shopcart></shopcart>
</template>
<script type="text/ecmascript-6">
    import cartconcontrol from 'components/shopcart/shopcart.vue';
    
    components:{
        shopcart
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>