vue组件（24）组件的emits和emit

Posted 2023-05-04

参考技术A 这个是定义组件的自定义事件的，如果组件都是用原生事件，那么可以不用emits。
其实就算有自己定义的事件也可以不写emits，程序也可以正常运行。
但是如果写了emits的话，那么就要按照要求写，否则会出现各种warn的警告，虽然也不影响运行，但是这明细是一个隐患，另外报一大堆warn也是很烦人的。

事件命名最好都是小写，因为不区分大小写，有时候会造成错误，可以用连字符来区分多个单词。

另外还可以像props 那样做一个验证

主要是验证参数是否符合要求的，然后用return true/false 表示。

这个大家都熟悉，是组件内部向父组件提交事件的，也可以用来修改props属性值。
看了一下官网，emit和v-model是一起介绍的，但是却没提emits的事。

如果这时候我们写了emits，就需要加上 emits: ['update:modelValue'] ，否则就会出现警告。

emit还可以提交其他的各种事件，比如一个select，本来是没有input事件的，但是我们可以用emit提交，然后在emits里面定义一下就可以。

封装表单控件，每个子控件都要挨个确认属性和事件，还是非常头疼的事情。不过嘛，反要一口一口的吃，早晚能够啃完。

Vue 监听和处理来自插槽内元素的 Emit

【中文标题】Vue 监听和处理来自插槽内元素的 Emit

【英文标题】：Vue listen and handle from Emits from elements inside slots

【发布时间】：2017-11-30 05:14:36

【问题描述】：

基本上我有父组件、子组件、子组件，而子组件有 2 个命名插槽，子组件有 1 个插槽，所以模板最终如下：

组件的结构

<parent>
    <child>
       <child-of-child></child-of-child>
    </child>
</parent>

父模板：

    <template>
        <div>
            <labeled-menu>
                <label slot="label">
                    Open Menu
                </label>
                <ul slot="menu">
                    <li v-for="i in [1,2,3,4,5,6,7]" @click="$emit('test', `$i li is clicked`)">List i</li>
                </ul>
            </labeled-menu>
        </div>
     </template>

具有 2 个命名插槽的子模板，而“菜单”插槽作为子组件的插槽传递：

    <template>
        <div>
            <div @click="show">
                <slot name="label">

                </slot>
            </div>
            <v-dialog :class="getMenuSize" :is-active="isActive" @hide="hide" :position="position">
                <slot name="menu">

                </slot>
            </v-dialog>
        </div>
    </template>

子组件

<template>
    <div>
        <div class="dialog-container">
            <div class="dialog-header">

            </div>
            <div class="dialog-body">
                <slot>
                      //here the ul and lis are basically displayed
                </slot>
            </div>
        </div>
    </div>
</template>

【参考方案1】：

我没有明白你的问题，但是如果你想要一个全局发射器处理程序，一个常见的模式是创建一个 vue 实例的单例并在你需要时导入它。

src/bus/index.js

import Vue from 'vue'

const bus = new Vue()

export default bus

src/components/Whatever.vue

import bus from 'src/bus'

// And then in your functions
bus.$on(...)
bus.$emit(...)
bus.$off(...)

如果您正在寻找更结构化的事件系统，您应该查看vuex 的存储模式。