$emit $on
时间: 2023-10-30 19:05:28 浏览: 45
$emit和$on是Vue.js框架中用于实现组件之间通信的方法。
通过使用$emit方法,子组件可以向父组件传递数据或触发一个自定义事件。在子组件中,可以使用$emit方法并指定一个自定义事件名和要传递的数据。而在父组件中,可以通过监听这个自定义事件来接收传递的数据。需要注意的是,$emit和$on的事件必须在一个公共的Vue实例上才能触发。
举个例子,假设我们有一个父组件和一个子组件。子组件想要将数据传递给父组件,可以在子组件中使用$emit方法:
```javascript
// 子组件
this.$emit('custom-event', data);
```
然后,在父组件中可以通过监听这个自定义事件来接收数据:
```javascript
// 父组件
<template>
<div>
<child-component @custom-event="handleEvent"></child-component>
</div>
</template>
<script>
export default {
methods: {
handleEvent(data) {
// 处理接收到的数据
}
}
}
</script>
```
需要注意的是,@custom-event是监听子组件的自定义事件,并在父组件中执行handleEvent方法。
总结起来,$emit方法用于触发一个自定义事件并传递数据,而$on方法用于在Vue实例中监听这个自定义事件并执行相应的处理方法。需要注意的是,这两个方法必须在同一个Vue实例上才能正常触发和监听。