[转] vue父组件触发子组件事件

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>