Skip to content
本页内容

事件

此章节假设你已经看过了插件基础。若你还不了解扩展插件是什么,请先阅读该章节。

在扩展插件中,要更新表单数据或触发事件就需要通过 emit 来实现。

注册

所有的事件均通过 defineEmits 注册:

ts
const emit = defineEmits<{
  (e: 'update:modelValue', value: number /* 插值值类型 */): void
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: number /* 插值值类型 */): void
}>()

该写法为 typescript 支持,另一种写法也可为:

ts
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits(['update:modelValue'])

在需要触发时,执行已经注册的事件:

ts
emit('update:modelValue', value)
emit('update:modelValue', value)

平台会同时响应该触发事件并执行相应的处理,在此示例中表单将会将控件的值更新。

触发事件

虽然你可以通过其他方式,比如通过 render 直接获取表单实例从而主动发起事件,但平台在后续的更新中随时可能对内部的结构进行调整,这可能会导致你的方法出现异常,所以应尽可能采取平台约定的方式进行操作。

示例

下面是一个自定义输入框插件绑定值的示例:

vue
<template>
  <div>
    My Input
    <input :value="modelValue" @input="handleInput" />
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  modelValue: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const handleInput = (e: Event) => {
  const target = e.target as HTMLInputElement
  emit('update:modelValue', target.value)
}
</script>
<template>
  <div>
    My Input
    <input :value="modelValue" @input="handleInput" />
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  modelValue: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const handleInput = (e: Event) => {
  const target = e.target as HTMLInputElement
  emit('update:modelValue', target.value)
}
</script>

当该输入框值发生修改后,会同时触发表单实例值的更新。更多请阅读 vue 组件基础 学习。

参考:事件 API

Powerd by Vitepress.