在
Vue 3
中，
自定义事件的写法有些不同于
Vue 2。下面是
Vue 3
中自定义事件的常见写法：
1. 使用`$emit`方法触发
自定义事件：
在父组件
中，可以使用`$emit`方法触发
自定义事件，并传递参数。例如：
```
vue
<template>
<button @click="handleButtonClick">点击触发
自定义事件</button>
</template>
<script>
export default {
methods: {
handleButtonClick() {
this.$emit('my-event', '
自定义参数');
}
}
};
</script>
```
在子组件
中，可以通过`v-on`指令监听并响应
自定义事件。例如：
```
vue
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message'],
mounted() {
this.$parent.$on('my-event', this.handleMyEvent);
},
methods: {
handleMyEvent(payload) {
console.log(payload); // 输出：
自定义参数
}
}
};
</script>
```
2. 使用`
provide/inject`提供和注入
自定义事件：
在父组件
中，可以使用`
provide`方法提供一个
自定义事件的回调函数。例如：
```
vue
<template>
<button @click="handleButtonClick">点击触发
自定义事件</button>
<child-component></child-component>
</template>
<script>
import {
provide } from '
vue';
export default {
setup() {
const handleMyEvent = (payload) => {
console.log(payload); // 输出：
自定义参数
};
const handleButtonClick = () => {
handleMyEvent('
自定义参数');
};
provide('my-event', handleMyEvent);
return {
handleButtonClick
};
}
};
</script>
```
在子组件
中，可以使用`inject`方法注入父组件提供的
自定义事件。例如：
```
vue
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import { inject } from '
vue';
export default {
setup() {
const handleMyEvent = inject('my-event');
return {
message: handleMyEvent ? handleMyEvent('
自定义参数') : ''
};
}
};
</script>
```
这是
Vue 3
中常见的
自定义事件写法。希望可以帮助到你！
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
