This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

preface

Originally, this article intended to write the principle of the global event bus in Vue, but found that I did not write the custom event, do not explain the operation of the custom event, it is difficult to write the principle of the global event, so there is this article.

First, V-ON command

To talk about custom events, we need to talk about the V-ON directive. Because V-ON is the basis for implementing custom events.

Documents on the V-ON website

Basic introduction

The V-ON directive can be abbreviated to @, and when we use the V-ON directive, it actually has a default parameter event.

It can be used with the following modifiers:

  1. .stop– callevent.stopPropagation(). Stop the bubbling
  2. .prevent– callevent.preventDefault(). Blocking default behavior
  3. .capture– Use capture mode when adding event listeners.
  4. .self– The callback is triggered only if the event is triggered from the listener bound element itself.
  5. .{keyCode | keyAlias}– The callback is triggered only if the event is triggered from a specific key. Key modifier, key alias
  6. .native– Listens for native events on the component root element.
  7. .once– Trigger only one callback.
  8. .left– (2.2.0) Only triggered when the left mouse button is clicked.
  9. .right– (2.2.0) Triggered only when the right mouse button is clicked.
  10. .middle– (2.2.0) Only triggered when the middle mouse button is clicked.
  11. .passive– (2.3.0){ passive: true }Mode adds listeners

These modifiers can be used in tandem.

Function:

  • Bind event listeners. The event type is specified by the parameter. The expression can be the name of a method or an inline statement, or it can be omitted if there are no modifiers.

  • When used on normal elements, only native DOM events can be listened for. When used on custom element components, it can also listen for custom events triggered by child components.

    That’s the second point of the day.

Example:

<! Processor - method - > < button v - on: click = "doThis" > < / button > <! Dynamic event server (+) - - - > < button v - on: [event] = "doThis" > < / button > <! - inline statement - > < button v - on: click = "doThat (' hello ', $event)" > < / button > <! <button @click="doThis"></button> <! -- dynamic event server (+) - - > < button @ [event] = "doThis" > < / button > <! - stop bubble - > < button @. Click the stop = "doThis" > < / button > <! <button @click.prevent="doThis"></button> <! <form @submit. Prevent ></form> <! <button @click.stop.prevent="doThis"></button> <! -- Key modifier, key alias --> < input_keyup. enter="onEnter"> <! <input @keyup.13="onEnter"> <! <button V-on :click.once="doThis"></button> <! <button v-on="{mousedown: doThis, mouseup: doThat}"></button>Copy the code

Listen for custom events on child components (event handlers are called when “my-event” is fired by child components) :

<my-component @my-event="handleThis"></my-component> <! <my-component @my-event="handleThis(123, $event)"></my-component> <! <my-component @click.native="onClick"></my-component>Copy the code

$on(vm.$ON (event,callback)) on VueComponent

  • Vm. $on (event callback) usage:

    Listen for custom events on the current instance. Events can be emitted by vm.$emit. The callback function receives any additional arguments that are passed in to the event that triggers the function.

I suggest you think about the difference here, because VM.$ON is the principle that implements the global event bus.

Custom events

Simple illustration:

$emit(‘ myevent ‘); $emit(‘ myevent ‘); $emit(‘ myevent ‘);

In fact, we bind A custom event to component A via V-on, which is essentially we bind an event to component A instance object VC with the name of our custom event.

Since we wrote A component tag, the Vue base layer also helps us with the new VueComponent() object.

About custom event names

Custom event names Unlike components and Prop, event names do not have any automated case conversion. You can only listen for an event if the event name matches exactly.

The V-ON event listener is automatically converted to all lowercase in the DOM template, so V-on :my-event will become V-ON :my-event so that myEvent cannot be listened on.

Vue always recommends you use itkebab-caseEvent name of.

Iii. Introductory cases

Implementation effect

App component

<template> <div id="app"> <! - props method is passed - > < Demo: showMsg = "showMsg" > < / Demo > <! -- Bind custom event send-message: is our custom event name, The following sendMessage custom event is triggered to execute the callback function --> <Demo1 V-ON :send-message="sendMessage"></Demo1> </div> </template> <script> import Demo from "./components/Demo.vue"; import Demo1 from "./components/Demo1.vue"; Export default {name: "App", components: {Demo, Demo1,}, methods: {showMsg() {alert(" received message from Demo "); }, sendMessage(value) {alert("sendMessage custom event triggered pull!! Received message from demo2 :" + value); ,}}}; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

The Demo components

<template> <div class="demo"> <h1>Demo</h1> <p>{{ msg }}</p> <button type="button" @click="sendMsg"> </button> </div> </template> <script> export default {props: {showMsg: Function,}, data() {return {MSG: "hello ",}; }, methods: { sendMsg() { this.showMsg(); ,}}}; </script> <style> .demo { width: 200px; height: 200px; background-color: #1488f5; } </style>Copy the code

demo1

<template> <div class="demo1"> <h1>Demo2</h1> <span>{{ msg }}</span> <button @click="sendAppMsg(msg)" type="button"> </button> </div> </template> <script> export default {data() {return {MSG: "Hello, EVERYONE, I'm from Demo2. }, methods: { sendAppMsg(message) { this.$emit("send-message", message); ,}}}; </script> <style> .demo1 { width: 200px; height: 200px; background-color: pink; } </style>Copy the code

Today is the beginning and the next section will cover the principles of the global event bus.

After the language

Everyone come on!! If there are deficiencies in the article, please point out in time, in this solemn thanks.

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.