Appearance
事件
此章节假设你已经看过了插件基础。若你还不了解扩展插件是什么,请先阅读该章节。
在扩展插件中,要更新表单数据或触发事件就需要通过 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