-
Notifications
You must be signed in to change notification settings - Fork 0
/
PropsAndData.vue
62 lines (62 loc) · 1.64 KB
/
PropsAndData.vue
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
<div>
<p>props.info: {{ info }}</p>
<p>props.name: {{ name }}</p>
<p>props.list: {{ list }}</p>
<p>data.a: {{ a }}</p>
<p>data.obj:{{obj}}</p>
<p>
<button @click="handleBChange">change data.b</button>
<button @click="handleAChange">change data.a</button>
<button @click="handleCChange">change data.c</button>
<button @click="handleObjChange">change data.obj</button>
<button @click="handleListChange">change data.list</button>
</p>
<p>{{c}}</p>
</div>
</template>
<script>
export default {
name: "PropsAndData",
props: {
info: Object,
name: String
},
data() {
this.c='haha'
return {
a: "hello",
b: "world",
// c:'haha',
obj:{},
list:[]
};
},
updated() {
console.log("触发 PropsAndData updated");
},
methods: {
handleBChange() {
this.b = "vueb" + Date.now();
console.log("data.b 发生了变化,但是并没有触发组件更新", this.b);
},
handleAChange(){
this.a = "vuea" + Date.now();
console.log("data.a 发生了变化,触发组件更新", this.a);
},
handleCChange(){
this.c = "vuec" + Date.now();
console.log("data.c 发生了变化,但是并没有触发组件更新", this.c);
},
handleObjChange(){
this.obj.number = 1;
// this.$set(this.obj, 'number', 1)
console.log("this.obj 发生了变化,但是并没有触发子组件更新", this.obj);
},
handleListChange() {
this.list.push(1, 2, 3);
console.log("this.list 并没有发生变化,但是触发了子组件更新", this.list);
}
}
};
</script>