Vue组成API:定义发射

ldxq2e6h  于 2022-11-17  发布在  Vue.js
关注(0)|答案(5)|浏览(143)

定义自定义事件时,Vue鼓励我们通过emits选项在组件上定义发出的事件:

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

使用Vue 3的组合API,当独立组合函数发出自定义事件时,是否可以在组合函数中定义这些事件?

u0sqgete

u0sqgete1#

不能,因为组合函数是在setup钩子内部使用的,它不能访问其他选项,如methodsemits

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选项,那么该函数将总是发出事件,即使该函数只在定义所发出事件的处理程序的组件内部使用。
使用新的脚本设置语法,您可以执行以下操作:

<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>
kyks70gy

kyks70gy2#

我使用脚本设置语法如下所示:

<script setup>
    import { defineEmits } from 'vue'

    const emit = defineEmits(['close'])

    const handleClose = () => {
        emit('close')
    }
</script>
dauxcl2d

dauxcl2d3#

如果你使用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打字:

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>
r3i60tvu

r3i60tvu4#

如果要获取所有context

setup(props, context) {
       // console.log(context)
       context.emit("update:modelValue", data)
    },
dldeef67

dldeef675#

可以使用此{}访问上下文选项。

setup(props, {emit} ) {
    emit("update:modelValue", data)
}

相关问题