父子组件传值
2018-07-12 本文已影响2人
程序员同行者
props
<!DOCTYPE html>
<html>
<head>
<title>父子组件传值</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<counter :count="3" @inc="handlechage"></counter>
<counter :count="2" @inc="handlechage"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
// 单项数据流概念，值组件默认不能修改父组件传来的数据
props: ['count'],
data: function() {
return {
number: this.count
}
},
template: '<div @click="handlerClick">{{number}}</div>',
methods: {
handlerClick: function() {
this.number = this.number + 2;
this.$emit('inc',2)
}
}
}
var vm = new Vue({
el:'#app',
data: {
total: 5
},
components: {
counter: counter
},
methods: {
handlechage :function(step) {
this.total += step
}
}
})
</script>
</body>
</html>
```·
