vue
通过$emit 实现通信
上面两种示例主要都是父组件向子组件通信,而通过$emit 实现子组件向父组件通信。
对于$emit官网上也是解释得很朦胧,我按我自己的理解是这样的:
1
|
vm.$emit( event, arg ) |
$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<template> <div>
<h1>{{title}}</h1>
<child @getMessage= "showMsg" ></child>
</div>
</template> <script> import Child from '../components/child.vue'
export default {
components: {Child},
data(){
return {
title: ''
}
},
methods:{
showMsg(title){
this .title=title;
}
}
}
</script> |
1
2
3
4
5
6
7
8
9
10
|
<template> <h3>我是子组件!</h3>
</template> <script> export default {
mounted: function () {
this .$emit( 'getMessage' , '我是父组件!' )
}
}
</script> |
示例效果三
https://www.jb51.net/article/140581.htm