如果想要使同一个组件实现不同的效果，那么可以这样做。
把需要封装的组件模板写在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>