下面代码是一个计数器的功能，首先看下面代码：
<!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在组件上时，是对组件的引用）
this.$refs.ref就是对组件的引用,我们拿到两个组件的count的和，赋值给父组件的sum.
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
