补充一下：之前没提到，这里是一个父子组件通信的方法
如果想要使同一个组件实现不同的效果，那么可以这样做。
把需要封装的组件模板写在template中
<template id="counter-template">
<h1>{{heading}}</h1>
<button @click="count+1">Submit{{count}}</button>
</template>
其中在建立组件时，用到了一个props属性，可以读取到引用组件里的自定义属性值，并且随着用户的操作进行动态的改变
我觉得这个属性特别的好，还是很好用的，所以在这里记录一下；
能够实现父子组件间的通信，后面还会更新其他一些内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>component</title>
<script src="Vue.min.js"></script> </head>
<body>
<div id="app">
<counter heading="Likes"></counter>
<counter heading="DisLikes"></counter>
</div>
<template id="counter-template">
<h1>{{heading}}</h1>
<button @click="count+1">Submit{{count}}</button>
</template>
<script>
Vue.component('counter',{
template:'#counter-template',
props:['heading'],
data:function(){
return { count:0};
} });
</script> </body>
</html>