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");