vue兄弟组件间的传参$refs, $emit, $on, $once, $off的使用

1.$refs的使用场景

父组件调用子组件的方法，可以传递数据。

父组件：

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

<div id="app">   <child-a ref="child"></child-a>   <button @click="getMyEvent">点击父组件</button> <div>   <script>   import ChildA from './child.vue'       export default{     components:{       ChildA     },     data(){       return {         msg:'我是父组件的数据'       }     },     methods:{       getMyEvent(){         //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。         this.$refs.child.emitEvent(this.msg)       }     }   } </script>

子组件：

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

<template>   <button>点击我</button> </template> <script>   export default{     methods:{       emitEvent(msg){         console.log('接收的数据------'+msg)       }     }   } </script>

2.$emit的使用

子组件调用父组件的方法并传递数据。

子组件：

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

<template>   <button @click="emitEvent">点击我</button> </template> <script>   export default{     data(){       return{         msg:'我是子组件的数据'       }     },     methods:{       emitEvent(){         //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。         this.$emit('my-event',this.msg)       }     }   } </script>

父组件：

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

<template>    <div id="app">     <child-a @my-event="getMyEvent"></child-a>     //父组件通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值。   </div> </template> <script>   import childA from './child.vue';   export default {     components:{       childA     },     methods:{       getMyEvent(msg){        console.log('接收数据---'+msg);        //接收数据，我是子组件的数据       }     }   } </script>

3.$on的使用场景

兄弟组件之间相互传递数据。

this.$root.$emit("change",'传的值');      //可以从$root获取vue的实例

首先创建一个Vue的空白实例（兄弟组件的桥梁）

1 2	import Vue from 'vue'; export default new Vue();

子组件A:发送放使用$emit自定义事件把数据带过去。

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

<template>   <div>     <span>A组件-{{msg}}</span>     <input type="button" value="把A组件数据传递给B" @click="send">   </div> </template> <script>   import eventBus from './eventBus';   export default{     data(){       return{         msg:{           a:'111',           b:'222'         }       }     },     methods:{       send(){         eventBus.$emit('aevent',this.msg)       }     }   } </script>

子组件B:接收方通过$on监听自定义事件的callback接收数据

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

<template>   <div>     <span>B组件，A传的数据为--{{msg}}</span>   </div> </template> <script>   import eventBus from './eventBus.vue'   export default {     data(){       return{         msg:''       }     },     mounted(){       eventBus.$on('aevent',(val)=>{//监听事件aevent，回调函数要使用箭头函数。         console.log(val);//打印结果；我是a组件的数据。       })     }   } </script>

父组件：

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

<template>    <div>     <childa></childa>     <br/>     <childb></childb>   </div> </template> <script>   import childa from './childa.vue';   import childb from './childb.vue';   export default{     componets:{       childa,       childb     },     data(){       return{         msg:''       }     }   } </script>

 

4.$off的使用场景

 

vm.$off( [event, callback] )
参数：
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]
用法：
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。

eventBus.$off("aevent");