「后端小伙伴来学前端了」Vue中组件绑定自定义事件实现通信

“后端哥们是来学前端的。”Vue中的组件都是绑定自定义事件来实现通信的定义事件，不懂这个自定义事件的操作，不好写全局事件的原理，所以才有了这篇文章。1、v-on命令要说自定义事件，就得先说说v-on命令。因为v-on是实现自定义事件的基础。v-on官网文档基本上介绍了v-on命令可以简写为@，而我们在使用v-on命令时，它其实是有一个默认参数event的。可以与之匹配的修饰符大致如下：.stop-调用事件。停止传播（）。停止冒泡。防止-调用event.preventDefault()。防止默认行为。捕获-添加事件侦听器时使用捕获模式。.self-仅当事件是从侦听器绑定到的元素本身触发时才触发回调。.{键码|keyAlias}-仅当事件是从特定键触发时才触发回调。key修饰符，keyalias.native-侦听组件根元素上的本机事件。.once-只触发一次回调。.left-(2.2.0)仅在单击鼠标左键时触发。.right-(2.2.0)仅在单击鼠标右键时触发。.middle-(2.2.0)仅在单击鼠标中键时触发。.passive-(2.3.0)在{passive:true}模式下添加监听器。这些修饰符部分可以链接起来。作用：绑定事件监听器。事件类型由参数指定。表达式可以是方法名或内联语句，如果没有修饰符可以省略。在普通元素上使用时，只能监听原生DOM事件。在自定义元素组件上使用时，还可以监听子组件触发的自定义事件。今天的第二点是我们的重点。示例：看完这个v-on，不知道大家还记得VueComponent实例上的$on，即vm.$on(event,callback)vm.$on(event,callback)用法：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数将接收传递给事件触发函数的任何附加参数。在这里，我建议大家思考一下它们的区别，因为vm.$on其实就是实现全局事件总线的原理。2、自定义事件简单说明：我们在App组件中通过v-on或者@给A组件绑定一个自定义事件，它的触发时间是等到A组件调用this.$emit('myeventinternally'),那么就会触发App组件中的回调。其实我们通过v-on给A组件绑定一个自定义事件，本质就是我们在A组件实例对象VC上绑定一个事件，事件名称就是我们自定义的名称。因为我们写了一个组件标签，Vue底层也帮我们新建了VueComponent()对象。关于自定义事件名称自定义事件名称不同于组件和道具，事件名称没有自动大小写转换。只有事件名称完全匹配才能侦听此事件。v-on事件监听器在DOM模板中会自动转为全小写，所以v-on:myEvent会变成v-on:my-event，导致myEvent无法被监听。Vue始终建议您始终使用kebab-case事件名称。3.介绍案例实现效果App组件