通过$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