Vue

Vue自定义事件,$emit使用方法

11-29 22: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

}

}


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


微信小程序
大潇博客 版权所有 Copyright ©2016~2025
京ICP备17004217号-6  合作QQ:284710375
天玺科技