在C/S编程中，对程序员来说，组件编程是一个不能忽视或者越过的技术能力，特别是自定义的组件编程以及构建基础组件库。
组件编程不是必须的，全部使用系统或者别人的组件（控件）也可以完成一般系统的开发；如果是略微复杂或者灵活度高的项目，在团队开发的情况下，熟练掌握组件化的编程技术就是对一个参与开发的程序员最起码要求了。
从代码的复用性来看，组件技术可以提高开发效率，增加项目开发的灵活性，对于后期维护的方便性也是不言而喻的。
去年学习了LayUI和EasyUI，LayUI真是挺好的，可惜面临着淘汰了。现在前端主流的开发框架有很多，比如Vue、React、BootStrap等，今年打算学习使用Vue。
学过基础语法后，首先要掌握的就是组件技术编程。
昨天进行了第一次学习，今天进行总结。
容易踩的坑：
（1）组件的名称中最好不要有大写字母；
（2）template定义为ID的时候最好写在{}里面的最前面。
1、定义一个组件
（1）组件当中的data定义为函数（方法）；
（2）组件之间的数据是独立的，相互之间不受影响；
（3）更新组件内容后，所有的组件实例也会同步进行更新；
（4）组件对象的内容可以单独定义，注册时传入内容对象即可。
网页完整演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的组件</title>
<!--引入Vue.js组件库-->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app1">
<mytitle></mytitle>
<mybutton1></mybutton1>
{
{msg}}
<mybutton2></mybutton2>
</div>
<br>
<div id="app2">
<minetitle></minetitle>
<mybutton1></mybutton1>
{
{msg}}
<mybutton2></mybutton2>
</div>
<template id="minetitle">
<div>
<h1 style="color: blueviolet;">
标题组件
</h1>
<button>按钮</button>
</div>
</template>
<script type="text/javascript">
var mytitle={
template:'<h1 style="color:red">标题组件</h1>'
};
var mytitle2={
template:"#minetitle"
};
var btn={
data(){
return { count:0 }
},
template:`<div><button @click="count++">按钮点击：{
{count}}</button></div>`
};
Vue.component("mybutton1",{
data(){
return { count:0 }
},
template:`<div><button @click="count++">按钮点击：{
{count}}</button></div>`
});
Vue.component("mybutton2",btn);
var vm1=new Vue({
el:"#app1",
components:{
mytitle:mytitle
},
data:{
msg:"Vue componet"
}
});
var vm2=new Vue({
el:"#app2",
components:{
minetitle:mytitle2
},
data:{
msg:"Vue componet"
}
});
</script>
</body>
</html>显示效果：
2、组件的注册
（1）全局注册：使用Vue.componet()，作用范围是全局或者多个Vue实例，在实例之外进行注册；
（2）局部注册：在实例中使用componets属性进行注册
网页完整演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的组件</title>
<!--引入Vue.js组件库-->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<mytitle titleinfo="标签名称" btnname="按钮名称1"></mytitle>
<br>
<mybutton1 buttonname="按钮名称2"></mybutton1>
</div>
<template id="minetitle">
<div>
<h1 style="color: blueviolet;">
{
{titleinfo}}
</h1>
<button @click="count++">{
{btnname}} 点击：{
{count}}</button>
</div>
</template>
<script type="text/javascript">
var Mytitle={
data(){
return { count:0 }
},
template:"#minetitle",
props:['titleinfo','btnname']
};
Vue.component("mybutton1",{
data(){
return { count:0 }
},
template:`<div><button @click="count++">{
{buttonname}} 点击：{
{count}}</button></div>`,
props:['buttonname']
});
var vm=new Vue({
el:"#app",
components:{
mytitle:Mytitle
}
});
</script>
</body>
</html>显示效果：
3、template模板
（1）可以把组件的定义内容写在html当中，然后通过定义对象的ID值与实例进行绑定；
（2）在组件模板下只能有唯一的div根标签。
4、组件的通讯
（1）父组件与子组件之间的通讯：父组件传递参数到子组件，通过props，值为数组；
（2）父组件与子组件之间的通讯：子组件传递参数到父组件，通过emit，就是子组件调用父组件中定义的方法，注意参数传递；
完整的网页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的组件</title>
<!--引入Vue.js组件库-->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<myparent></myparent>
</div>
<template id="child">
<div>
<input type="text" v-model="childmsg">
<button @click="childclick">发送消息</button>
</div>
</template>
<template id="parent">
<div>
<mychild @childclickfunc="parentfunc"></mychild>
<p>子组件的消息：{
{parentmsg}}</p>
</div>
</template>
<script type="text/javascript">
Vue.component("mychild",{
template:"#child",
data(){
return { childmsg:'1231' }
},
methods:{
childclick(){
this.$emit('childclickfunc',this.childmsg);
}
}
});
Vue.component("myparent",{
template:"#parent",
data(){
return { parentmsg:'' }
},
methods:{
parentfunc(str){
this.parentmsg=str;
}
}
});
var vm=new Vue({
el:"#app"
});
</script>
</body>
</html>显示效果：
（3）平行组件之间的通讯，通过emit结合$refs进行。
完整的网页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的组件</title>
<!--引入Vue.js组件库-->
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<myparent></myparent>
</div>
<template id="child">
<div>
<input type="text" v-model="childmsg">
<button @click="childclick">发送消息</button>
</div>
</template>
<template id="parent">
<div>
<mychild @childclickfunc="parentfunc"></mychild>
<p>子组件的消息：{
{parentmsg}}</p>
</div>
</template>
<script type="text/javascript">
Vue.component("mychild",{
template:"#child",
data(){
return { childmsg:'1231' }
},
methods:{
childclick(){
this.$emit('childclickfunc',this.childmsg);
}
}
});
Vue.component("myparent",{
template:"#parent",
data(){
return { parentmsg:'' }
},
methods:{
parentfunc(str){
this.parentmsg=str;
}
}
});
var vm=new Vue({
el:"#app"
});
</script>
</body>
</html>显示效果：
上面最重要的内容就是组件之间的消息传递，这个与C/S下类似，比如props参数传递是数组，包含的不仅就是一个变量，可以是对象，平行组件的参数传递与父子组件之间的信息传递方式也类同，C/S和B/S在编程理念上是相通的，从这点出发掌握B/S下的组件编程就比较容易了。
后面再进一步地学习。