美文网首页
(十三)Vue3.x中的emits选项

(十三)Vue3.x中的emits选项

作者: Mr_莫言之 | 来源:发表于2020-10-23 09:41 被阅读0次
    本章节将介绍到的是用于记录当前实例中的emit事件的选项。

    1、概述:当前组件的通过emit的事件列表
    2、类型:Array|Object
    3、作用:Vue3.0中使用emit发起事件时会要求当前组件记录emit事件(没有则控制台会抛出警告)。
    4、用途:用于记录当前组件emit的事件,当为对象时,则可以验证传入的值是否有效。

    setup(prop, { emit }) {
        const changeOne = val => {
            emit('on-changeOne', val);
        };
        const changeTwo  = val => {
            emit('on-changeTwo', val);
        };
    }
    

    用法一:数组用法

    export default {
        emits:['on-changeOne', 'on-changeTwo'],
        setup() {...}
    }
    

    用法二:对象用法,当emits为对象时,可以验证事件中的参数是否有效

    export default {
        emits:{
            click: null,
            'on-changeOne': payload => {
                if(...) {
                    return true; // 验证通过
                }
                console.warn('验证失败!')
                return false; // 验证失败,控制台打印vue警告及“验证失败!”警告
            },
            'on-changeTwo': payload => {...}
        },
        setup() {...}
    }
    // 当验证函数中没有返回值return时,默认返回true
    

    注意:emits无论是数组或者对象用法最终都会将事件给传递出去,数组或对象的使用只是为了记录实例中的emit事件,或者是验证事件中的参数。

    下一章:(十四)Vue3.x核心之getCurrentInstance
    上一章:(十二)Vue3.x中重写的v-model

    ps:明明知道闯一闯可能会拼出一片天地,那为什么还是有大部分的人选择了平凡?

    相关文章

      网友评论

          本文标题:(十三)Vue3.x中的emits选项

          本文链接:https://www.haomeiwen.com/subject/oornpktx.html