组件的含义其实就是对一些功能进行封装。vue的项目开发都是以组件化的形式去开发的，一个项目一般都是划分成多个组件，然后拼接而成的。
<body>
<div id='app'>
<!-- 3.使用组件 -->
<cpn></cpn>
</div>
<template id='cpn'>
<div>
这是组件的数据
</div>
</template>
<script>
// 1.创建组件实例
const component1 = Vue.extend({
template: '#cpn'
});
//2。注册组件
Vue.component('cpn',component1);
const app = new Vue({
el: '#app',
data: {
count: 10
}
});
</script>
</body>
全局组件可以在任何vue的实例里面使用，而局部组件组能在其注册的vue实例里面使用
<body>
<div id='app'>
<!-- 全局组件展示 -->
<cpn1></cpn1>
<!-- 局部组件展示 -->
<cpn2></cpn2>
</div>
<template id='cpn1'>
<div>
这是全局组件
</div>
</template>
<template id='cpn2'>
<div>
这是局部组件
</div>
</template>
<script>
// 创建组件实例1
const component1 = Vue.extend({
template: '#cpn1'
});
// 创建组件实例2
const component2 = Vue.extend({
template: '#cpn2'
});
//全局注册
Vue.component('cpn1',component1);
const app = new Vue({
el: '#app',
data: {
count: 10
},
// 局部注册
components: {
cpn2: component2
}
});
</script>
</body>
<body>
<div id='app'>
<cpn></cpn>
</div>
<template id='cpn'>
<div>
这是组件
</div>
</template>
<script>
// 一步到位
const cpn = {
template: "#cpn"
}
const app = new Vue({
el: '#app',
data: {
count: 10
},
// 局部注册
components: {
cpn
}
});
</script>
</body>