vue组件之$emit

$emit 实现并不是父组件向子组件发送消息来进行通信,而是通过子组件向父组件发送消息来进行通信的,这个上和其他的稍微有点不同。
对于$emit,我先是看了下官网的介绍说明
在这里插入图片描述
有些看不懂,后来自己差了些资料:
其实也就是:vm.$emit( event, arg )
$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数:

<template>
 <div>
 	 <h1>{{name}}</h1>
  		<child @getMessage="showMsg"></child>
 	</div>
</template>
 
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  data(){
   		return{
    		name:''
   		}
  },
  methods:{
   showMsg(name){
    this.name=name;
   }
 }
 }
</script>


<template>
 <h3>我是小超!</h3>
</template>
<script>
 export default {
  	mounted: function () {
   		this.$emit('getMessage', '我是大超!')
  	}
 }
</script>

输出结果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值