vue3 emitted用法
时间: 2024-08-21 15:00:44 浏览: 57
在Vue 3中,`emitted`是一个特殊的对象属性,它是在组件实例上自动创建的,用于存储所有自定义事件发射的事件信息。当你在一个组件的某个函数中使用`this.$emit`触发一个事件时,这个事件会自动添加到`emitted`对象中,并带有一些附加信息,如事件名称、传递的参数等。
例如:
```javascript
<template>
<button @click="doSomething">点击我</button>
</template>
<script>
export default {
methods: {
doSomething() {
this.$emit('customEvent', 'Hello from child component');
}
}
}
</script>
```
在父组件里接收并处理这个事件:
```javascript
<template>
<ChildComponent @customEvent="handleCustomEvent"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(event) {
console.log('Received event:', event);
}
}
}
</script>
```
当用户点击按钮时,`doSomething`方法会被调用,触发`customEvent`,并将参数`'Hello from child component'`传递给父组件。父组件通过`handleCustomEvent`接收并处理这个事件。