this.$emit()是什么作用?
时间: 2023-08-15 20:13:14 浏览: 45
`this.$emit()` 是 Vue.js 中的一个方法,用于触发自定义事件并向父组件传递数据。
在 Vue.js 组件中,可以通过 `$emit` 方法触发一个自定义事件,并传递数据给父组件。这个方法需要接收两个参数:事件名称和要传递的数据。
例如,在一个子组件中,可以使用 `this.$emit('eventName', data)` 来触发名为 `eventName` 的自定义事件,并将 `data` 数据传递给父组件。父组件可以通过在模板中监听该自定义事件来捕获并处理数据。
示例代码:
```javascript
// 子组件
methods: {
handleClick() {
const data = 'Hello, parent!'
this.$emit('customEvent', data)
}
}
// 父组件模板
<template>
<div>
<child-component @customEvent="handleCustomEvent"></child-component>
</div>
</template>
// 父组件
methods: {
handleCustomEvent(data) {
console.log(data) // 输出 'Hello, parent!'
}
}
```
在上述示例中,当子组件的 `handleClick` 方法被调用时,它会使用 `this.$emit` 触发了一个名为 `customEvent` 的自定义事件,并将数据 `'Hello, parent!'` 传递给父组件。父组件通过在模板中监听 `@customEvent` 来捕获该事件,并将传递的数据打印到控制台。
通过 `this.$emit` 方法,子组件可以主动向父组件发送数据,实现了组件间的通信和数据传递。