在vue3的script方法里使用emit示例
时间: 2024-03-17 17:44:15 浏览: 59
好的,以下是一个使用 `emit` 的示例代码:
```vue
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
setup(props, { emit }) {
const handleClick = () => {
emit('my-event', 'some data')
}
return {
handleClick
}
}
})
</script>
```
在这个示例中,我们定义了一个 `handleClick` 函数,当按钮被点击时会触发该函数。在函数中,我们使用 `emit` 函数来触发 `my-event` 事件,并且传递了一个字符串 `'some data'` 作为事件的参数。在父组件中,可以通过 `v-on:my-event` 或 `@my-event` 来监听该事件,并且可以在事件处理函数中访问到传递的参数。例如:
```vue
<template>
<child-component @my-event="handleMyEvent"></child-component>
</template>
<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default defineComponent({
components: {
ChildComponent
},
methods: {
handleMyEvent(data) {
console.log(data) // 输出 'some data'
}
}
})
</script>
```
在这个示例中,我们通过 `@my-event` 来监听 `child-component` 组件中触发的 `my-event` 事件,并且在事件处理函数中输出了传递的参数 `'some data'`。
阅读全文