下面代码是一个计数器的功能，首先看下面代码：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div ref="one" is="counter" @sumadd="handlerAdd"></div>
<div ref="two" is="counter" @sumadd="handlerAdd"></div>
<div>{{sum}}</div>
</div>
<script>
Vue.component("counter",{
template:'<div @click="handlerClick">{{count}}</div>',
data: function(){
return {
count:0
}
},
methods:{
handlerClick: function(){
this.count++;
this.$emit("sumadd");
}
}
})
var vm = new Vue({
el:"#root",
data:{
sum:0
},
methods:{
handlerAdd: function(){
this.sum= this.$refs.one.count+this.$refs.two.count;
}
}
})
</script>
</body>
</html> 我们定义了一个组件counter，在html中两个div标签对组件做了引用，一个ref设置one,一个ref设置为two。
第三个div是上面两个div数字的和，我们做的效果就是上面两个div数字增加时，获取两个组件的值，显示到第三个div标签中。
（当ref在html标签上时，是对dom的引用，当ref在组件上时，是对组件的引用）
![Vue项目 - 单文件组件和Vue中的路由[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)