父子组件的数据传递
父组件向子组件传值
通过属性传递
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <div id="root">
<counter :count="2"></counter>
<counter :count="1"></counter>
</div>
<script>
var counter = {
props: ['count'],
template: '<div>{{ count }}</div>'
}
var vm = new Vue({
el: "#root",
components: {
counter: counter
}
})
</script>
|
子组件不要去修改父组件传递过来的值(单向数据流)，因为传过来的可能是一个引用
错误示范：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <div id="root">
<counter :count="2"></counter>
<counter :count="1"></counter>
</div>
<script>
var counter = {
props: ['count'],
template: '<div @click="handleClick">{{ count }}</div>',
methods: {
handleClick: function() {
this.count++
}
}
}
var vm = new Vue({
el: "#root",
components: {
counter: counter
}
})
</script>
|
正确做法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 | <div id="root">
<counter :count="2"></counter>
<counter :count="1"></counter>
</div>
<script>
var counter = {
props: ['count'],
data: function() {
return {
number: this.count,
}
},
template: '<div @click="handleClick">{{ number }}</div>',
methods: {
handleClick: function() {
this.number++
}
}
}
var vm = new Vue({
el: "#root",
components: {
counter: counter
}
})
</script>
|
子组件向父组件传值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 | <div id="root">
<counter :count="2" @inc="handlerIncrease"></counter>
<counter :count="3" @inc="handlerIncrease"></counter>
<div>{{ total }}</div>
</div>
<script>
var counter = {
props: ['count'],
data: function() {
return {
number: this.count,
}
},
template: '<div @click="handleClick">{{ number }}</div>',
methods: {
handleClick: function() {
this.number = this.number + 2;
this.$emit("inc", 2);
}
}
}
var vm = new Vue({
el: "#root",
data: {
total: 5
},
components: {
counter: counter
},
methods: {
handlerIncrease: function(step) {
this.total += step;
}
}
})
</script>
|