有这样的情况:数据是父组件的,事件是子组件的,想通过子组件的事件,改变父组件的数据,这时需要父组件和子组件之间进行通讯,子组件通过抛出事件通知父组件
这就用到组件的自定义事件:一种组件间通信的方式,适用于:子组件 ==> 父组件
使用方法:
在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
}
}
一个子组件可以抛出很多事件,属性可以一层接一层向下传递,事件可以一层接一层向上抛