联系QQ 284710375
首页 > 技术分享 > Vue
收藏

Vue自定义事件,$emit使用方法2023-11-29 22:12:32

大潇博客 原创文章,转载请标明出处

有这样的情况:数据是父组件的,事件是子组件的,想通过子组件的事件,改变父组件的数据,这时需要父组件和子组件之间进行通讯,子组件通过抛出事件通知父组件


这就用到组件的自定义事件:一种组件间通信的方式,适用于:子组件 ==> 父组件


使用方法:

在methods方法中,通过this.$emit("自定义事件名称", 可选参数)向父组件抛出自定义事件

父组件需要注册自定义事件,格式为@自定义事件名称

比如:

子组件抛出事件

<li @click="$emit('active',123)">抛出事件</li>

#或者

<li @click="diyFun">抛出事件</li>

methods:{

diyFun(){

this.$emit('active',123);

}

}

$emit是个Vue函数,其中的参数:第一个表示抛出的事件名称(父组件接收使用),第二个表示事件参数


父组件接收事件

<li @active="fun">接收事件</li>

methods:{

fun(e){

console.log(e); //123

}

}


一个子组件可以抛出很多事件,属性可以一层接一层向下传递,事件可以一层接一层向上抛


打赏

阅读排行

大家都在搜

博客维护不易,感谢你的肯定
扫码打赏,建议金额1-10元
  • 15601023311