The # vue enclosing $emit (); What is the return value

There are three attributes in VUE: attribute, event, slot, and — event

In the event there is

  1. @click/@input/@change/@xxx… Events;

  2. @input. Trim,@click.stop,@submit. Prevent… Typically used with native HTML elements;

    $emit(); $emit(); The return value is this;

Example code:

In the child component: event.vue: receives the props:{name:String} property passed by the parent component; In the input tag:

  1. value=name; Bind the name attribute;
  2. Normal events via @change=”handleChange”; Listen to input box input value;

In the script tag:

  1. $emit(“Echange”, e.t. value, val => {console.log(val); }); Pass the value to the parent through a callback; Custom event “Echange”;
<template> <div> name: {{ name || "--" }} <br /> <input :value="name" @change="handleChange" /> <br /> <br /> <div @click="handleDivClick"> < button@click ="handleClick"> </button>&nbsp; &nbsp; &nbsp; <button @click.stop="handleClick"> </button> </div> </div> </template> "EventDemo", props: { name: String }, methods: { handleChange(e) { const res = this.$emit("Echange", e.target.value, val => { console.log(val); }); console.log(res, res === this); }, handleDivClick() { this.$emit("change", ""); }, handleClick(e) {e.topPropagation (); }}}; </script>Copy the code

The parent responds to the callback by listening for child events;

  1. The parent component can pass a value to the child through a callback function, callback();
<template>
    
      <Event :name="name" @Echange="handleEventChange" />
    
    </template>
    
    <script>
    import Event from "./Event";
    
    export default {
      components: {
    Event,
      
      },
      data: () => {
    return {
      name: ""}; },mounted() {
    
      },
      methods: {
      
    handleEventChange(val, callback) {
      this.name = val;
      callback("hello");
      return "hello"; }}}; </script>Copy the code