这篇文章主要介绍了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的使用场景
兄弟组件之间相互传递数据。
首先创建一个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>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: