子组件传值给父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用组件完成计数器</title>
<script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<div>
<counter ref="one" @change="changeSum"></counter>
<counter ref="second" @change="changeSum"></counter>
<div>{{sum}}</div>
</div>
</div>
</body>
<script>
Vue.component('counter',{
data:function(){
return {
number:0
}
},
template:'<div @click="numberAdd">{{number}}</div>',
methods:{
numberAdd:function () {
this.number ++;
this.$emit('change');//子组件触发父组件
}
}
})
var app = new Vue({
el:"#app",
data:{
sum:0
},
methods: {
changeSum: function () {
this.sum = this.$refs.one.number + this.$refs.second.number;
}
}
})
</script>
</html>
1385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
