1. 父组件中获取子组件方法
- $children
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template> <div> <v-header></v-header> <v-content></v-content> <v-footer></v-footer> </div></template><script> import vHeader from './Header'; import vContent from './Content'; import vFooter from './Footer'; export default { components:{vHeader,vContent,vFooter}, created(){ console.log(this.$children) //输出结果[VueComponent,VueComponent,VueComponent],此时可以通过下标获取响应组件，如获取vHeader为this.$children[0]. } }</script> |
- $refs
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template> <div> <v-header ref='header'></v-header> <v-content ref='content'></v-content> <v-footer ref='footer'></v-footer> </div></template><script> import vHeader from './Header'; import vContent from './Content'; import vFooter from './Footer'; export default { components:{vHeader,vContent,vFooter}, created(){ console.log(this.$refs); //输出结果：{header:VueComponent,content:VueComponent,footer:VueComponent},此时可以通过对象key进行获取响应组件，如vHeader组件获取为this.$refs.header } }</script> |
2. 子组件中定义父组件所要触发事件
- methods直接定义
|
1
2
3
4
5
6
7
8
9
10
|
<script> export default { methods:{ childAction(val='hello world'){ console.log(val) } //此时在父组件，可以通过获取相应子组件，使用对象key值childAction对其进行调用,当前函数形参非必须 } }</script> |
- $on
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script> export default { mounted(){ this.$on('bridge',(val)=>{ this.childAction(val); }); ///此时通过$on进行监听中间桥接函数bridge对目的方法childAction进行触发 }, methods:{ childAction(val='hello world'){ console.log(val) } } }</script> |
3. 父组件调用子组件方法
- 父组件Father.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
|
<template> <div> <v-header ref='header'></v-header> <v-content ref='content'></v-content> <v-footer ref='footer'></v-footer> <button @click='emitChild1'>ref与on触发</button> <button @click='emitChild2'>ref直接触发</button> <button @click='emitChild3'>children与on触发</button> <button @click='emitChild4'>children直接触发</button> </div></template><script> import vHeader from './Header'; import vContent from './Content'; import vFooter from './Footer'; export default { components:{vHeader,vContent,vFooter}, methods:{ emitChild1(){ this.$refs.footer.$emit('bridge','你好吗!'); //打印： 你好吗 this.$refs.footer.$emit('bridge'); //打印：hello world }, emitChild2(){ this.$refs.footer.childAction('你好吗!'); //打印： 你好吗 this.$refs.footer.childAction(); //打印：hello world }, emitChild3(){ this.$children[2].$emit('bridge','你好吗!'); //打印： 你好吗 this.$children[2].$emit('bridge'); //打印：hello world }, emitChild4(){ this.$children[2].childAction('你好吗!'); //打印： 你好吗 this.$children[2].childAction(); //打印：hello world }, } }</script> |
- 子组件Footer.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<template> <footer>This is footer-component</footer></template><script> export default { mounted(){ this.$on('bridge',(val)=>{ this.childAction(val); }); }, methods:{ childAction(val='hello world'){ console.log(val) } } }</script> |