ref和emit()求和功能
2018-08-03 本文已影响3人
椰果粒
refs：组件上，或取的是组件的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 有时候需要操作DOM节点，比如获取DOM节点中的内容，那就可以给DOM一个ref引用 -->
<!-- 一个求和的功能 -->
<counter @change="changeNumber" ref="one"></counter>
<counter @change="changeNumber" ref="two"></counter>
<div>两个数的和是：{{total}}</div>
</div>
<script>
Vue.component("counter",{
template : `<div @click="changeNum">{{number}}</div>`,
data : function(){
return {
number : 0
}
},
methods : {
changeNum : function(){
this.number ++;
this.$emit("change")
}
}
});
var vm = new Vue({
el : "#app",
data : {
total : 0
},
methods : {
changeNumber : function(){
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
})
</script>
</body>
</html>
