I am trying to understand how $emit event works in vue so following this Guide:

Should be as below:

CodePudding user response：

At your parent component you have hardcoded value,

<InlineEmitEventChild @add="add(10)" />

Change it to

<InlineEmitEventChild @add="add" />

CodePudding user response：

For test the code you can go here >>> Example just click the Add Math Random to get the random number.

child component

<template>
  <div >
    <button @click="addRandom">Add Math Random</button>
  </div>
</template>

<script>
export default {
  name: "RandomWorld",
  data() {
    return {
      Num1: 0,
    };
  },
  methods: {
    addRandom() {
      this.Num1 = Math.random(this.Num1);
      console.log(this.Num1);
      this.$emit("getrandom", this.Num1);
      //console.log(this.Num1);
    },
  },
};
</script>

parent component

<template>
   <Childcomponent @getrandom="displayRandom($event)"/>
</template>
<script>
import Childcomponentvue from "./childcomponents.vue";
export default {
  name: "App",
  components: {
    Childcomponent: Childcomponentvue,
  },
  data() {
    return {
      Random:0,
    };
  },
  methods: {
    displayRandom(e){
      console.log(e);
      this.Random = e;
    }
  },
};
</script>