此处分为以下5个部分讲

image.png

定义自定义事件

可将自定义事件定义在组件 emits 选项中，所有事件名可装在一个数组

举例🌰：在emits选择中，放入一个自定义事件inFocus

动画19.gif

当在emits选项中如果定义了原生事件 (如click) 时，将使用组件中的事件替代原生事件

派发事件和监听事件

可以在子组件中通过$emit()派发事件并传递参数

this.$emit('submit', { email, password })

可以在父级组件通过v-on监听事件

举例🌰：在子组件中触发my-event事件，在父级组件中监听该事件

动画20.gif

事件名

自定义事件的事件名与组件和 prop 一样，提供了自动大小写转换

在DOM中，为组件添加自定义事件监听时，事件名建议使用kebab-case命名法，派发的也是kebab-case

如之前的这个例子🌰

动画20.gif

如果在字符串模板中使用，则可以是驼峰也可以是kebab-case命名法

验证事件

验证事件和验证prop类似，只是前者使用emits后者使用props

emits选项的值可以为对象，对象中每个属性名表示事件名，属性的值表示事件相关的验证

相关验证通常是一个函数，函数会自动接收所监听事件的参数，其实验证事件主要就是验证事件传递的参数是否合规

举例🌰：验证my-event事件，必须传入两个参数

动画21.gif

如上，验证my-event需要两个参数，但是我没有传，结果就是Vue发出警告：[Vue warn]: Invalid event arguments: event validation failed for event "my-event".

验证函数最终会返回一个布尔值，表示事件是否有效

组件上的v-model

v-model的参数

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件

可以通过v-model的参数来修改modelValue，如v-model:xxx

修改后的事件名对应变成update:xxx

举例🌰：下面事件名称变成了update:my-title，而不是默认的update:modelValue

动画22.gif

多个v-model绑定

可以在单个组件实例上创建多个 v-model 绑定

每个 v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项

其实使用上，跟单个v-model没啥区别，这里就不举例🌰了

处理v-model修饰符

v-model的内置修饰符有.trim、.number 和 .lazy，作用分别是：去除两边空白、将其变成数字和变成懒模式

用法很简单，直接在v-model后或在其修饰符后添加即可，举例🌰：将title两边空格去掉

动画23.gif

Vue3中可以为v-model自定义修饰符，通过modelModifiers

对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"

举例🌰：自定义一个将首字母大写的修饰符capitalize

<div id="app">
    <my-component v-model.capitalize='title'></my-component>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const { createApp } = Vue
    const MyComponent = {
        template: '<input @input="onInput" :value="modelValue" />',
        emits: ['update:mode-value'],
        props: {
            modelValue: {
                type: String,
                default: ''
            },
            modelModifiers: {
                default: () => ({})
            }
        },
        methods: {
            onInput(e) {
                let val = e.target.value
                if (this.modelModifiers.capitalize) {
                    val = val.charAt(0).toUpperCase() + val.slice(1)
                    console.log(val);
                }
                this.$emit('update:mode-value', val)
            }
        }
    }
    const app = createApp({
        data() {
            return {
                title: 'v-model修饰符'
            }
        },
        components: { 'my-component': MyComponent }
    })
    app.mount('#app');
</script>

小结

为了方便，我将自定义事件相关内容汇总为一图

4自定义事件.png

END

为了方便批量下载，相关脑图原图已上传到GitHub：

https://github.com/jCodeLife/mind-map

文中如有其他问题，欢迎留言告知~