Vue中子组件调用父组件的3种方法实例——this.$parent调用方法、this.$emit触发方法、v-model方法传值

Vue中子组件调用父组件的3种方法实例——this.$parent调用方法、this.$emit触发方法、v-model方法传值

1、直接在子组件中通过“this.$parent.event”来调用父组件的方法。

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可。

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、父组件把方法传入子组件中,在子组件里直接调用这个方法即可。

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22