下面代碼是一個計數器的功能，首先看下面代碼：
<!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=)