在组件内自定义事件:
<template>
<form class="validate-form-container">
<slot name="default"></slot>
<div class="submit-area" @click.prevent="submitForm">
<slot name="submit">
<button type="submit" class="btn btn-primary">提交</button>
</slot>
</div>
</form>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
emits: ['form-submit'], // 先申明
setup(props, context) {
const submitForm = () => {
context.emit('form-submit', true) // 后定义事件以及传值
}
return {
submitForm
}
}
})
</script>
在使用组件的时候调用自定义事件:
在onFormSubmit方法中打印出事件返回的结果: