定义自定义事件时,Vue鼓励我们通过emits选项在组件上定义发出的事件:
emits
app.component('custom-form', { emits: ['inFocus', 'submit'] })
使用Vue 3的组合API,当独立组合函数发出自定义事件时,是否可以在组合函数中定义这些事件?
u0sqgete1#
不能,因为组合函数是在setup钩子内部使用的,它不能访问其他选项,如methods和emits:
setup
methods
export default defineComponent({ name: "layout", emits: ['showsidebar'], setup(props, { emit }) { const showSidebar = ref(true); const { breakpoints } = useBreakpoint(); watch(breakpoints, (val) => { showSidebar.value = !(val.is === "xs" || val.is === "sm"); emit('showsidebar',showSidebar.value); }); return { showSidebar, }; }, data() { // ... }, });
在这个例子中,useBreakpoint只提供了组件可以使用的一些逻辑。如果有一种方法可以在组合函数中定义emits选项,那么该函数将总是发出事件,即使该函数只在定义所发出事件的处理程序的组件内部使用。使用新的脚本设置语法,您可以执行以下操作:
useBreakpoint
<script setup> import { defineEmits,watch,ref } from 'vue' const emit = defineEmits(['showsidebar']) const showSidebar = ref(true); const { breakpoints } = useBreakpoint(); watch(breakpoints, (val) => { showSidebar.value = !(val.is === "xs" || val.is === "sm"); emit('showsidebar',showSidebar.value); }); </script>
kyks70gy2#
我使用脚本设置语法如下所示:
<script setup> import { defineEmits } from 'vue' const emit = defineEmits(['close']) const handleClose = () => { emit('close') } </script>
dauxcl2d3#
如果你使用script setup,你可以使用defineEmits,它是一个编译器宏,你不必导入它:
script setup
defineEmits
<script setup> const emit = defineEmits(['inFocus', 'submit']) emit('inFocus') </script>
您也可以使用对象语法来执行事件验证:
<script setup> const emit = defineEmits({ // No validation inFocus: null, // Validate submit event submit: ({ email, password }) => { if (email && password) return true else return false } }) function submitForm(email, password) { emit('submit', { email, password }) } </script>
注:无论是否验证,都会发出submit事件,但如果验证未通过,则会收到Vue警告:[Vue warn]:事件参数无效:事件“submit”的事件验证失败。See it live使用TS打字:
submit
<script setup lang="ts"> const emit = defineEmits<{ (e: 'change', id: number): void (e: 'update', value: string): void }>() </script>
r3i60tvu4#
如果要获取所有context:
context
setup(props, context) { // console.log(context) context.emit("update:modelValue", data) },
dldeef675#
可以使用此{}访问上下文选项。
{}
setup(props, {emit} ) { emit("update:modelValue", data) }
5条答案
按热度按时间u0sqgete1#
不能,因为组合函数是在
setup
钩子内部使用的,它不能访问其他选项,如methods
和emits
:在这个例子中,
useBreakpoint
只提供了组件可以使用的一些逻辑。如果有一种方法可以在组合函数中定义emits
选项,那么该函数将总是发出事件,即使该函数只在定义所发出事件的处理程序的组件内部使用。使用新的脚本设置语法,您可以执行以下操作:
kyks70gy2#
我使用脚本设置语法如下所示:
dauxcl2d3#
如果你使用
script setup
,你可以使用defineEmits
,它是一个编译器宏,你不必导入它:您也可以使用对象语法来执行事件验证:
注:无论是否验证,都会发出
submit
事件,但如果验证未通过,则会收到Vue警告:[Vue warn]:事件参数无效:事件“submit”的事件验证失败。
See it live
使用TS打字:
r3i60tvu4#
如果要获取所有
context
:dldeef675#
可以使用此
{}
访问上下文选项。