vue组件：主要是拆分代码，减少vue实例的代码量，方便ui的重用。
vue创建组件的方式，Vue.component(组件名称，组件构造器)，跟创建Vue对象相似，同样有data、methods、watch等，但是组件的data必须是一个函数，而且没有el获取根实例。
如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<my-com></my-com>
</div>
<script type="text/javascript">
Vue.component("myCom",{
//data必须是一个函数
data :function(){
return{
count:0
}
},
template:"<button v-on:click=‘count++‘>点击了{{count}}次</button>"
})
var vm = new Vue({
el:"#app"
})
</script>
</body>
</html>
还有通过extend的几种方式来实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<my-com></my-com>
<mycom2></mycom2>
<mycom3></mycom3>
<mycom4></mycom4>
</div>
<template id="temp">
<div >
<h1>第四种组件的实现方式</h1>
<h2>这种写法的好处是能够提示信息</h2>
</div>
</template>
<script>
var com1 = Vue.extend({
template:‘<h1>组件的第一种实现方式</h1>‘
})
Vue.component(‘myCom‘,com1)
Vue.component(‘mycom2‘,Vue.extend({
template:‘<h2>组件的第二种实现方式</h2>‘
}))
Vue.component(‘mycom3‘,{
template:‘<h3>组件的第三种实现方式</h3>‘
})
Vue.component(‘mycom4‘,{
template:"#temp"
})
var vm = new Vue({
el:"#app"
})
</script>
</body>
</html>
组件是通过prop来进行数据传递的。
原文：https://www.cnblogs.com/qcq0703/p/11986084.html