Vuejs 3 emit event from child to parent component

Question

I've recently started working with VueJS, I'm using v3 and seem to be having an issue calling a method on a parent. The emit function in the child doesn't seem to be emitting the event and nothing is getting picked up in the parent.

I've included the parent and child to show how I have it set up

Parent

<template>
  <First/>
  < Child v-bind:sample="sample" @enlarge-text="onEnlargeText"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import First from './First.vue';
import Child from './Child.vue';

export default defineComponent({
  name: 'Container',
  components: {
    First,
    Child,
  },
  methods: {
    onEnlargeText() {
      console.log('enlargeText');
    },
  },
  data: () => ({
    sample: [],
    parentmessage: '',
  }),
  created() {
    axios.get('http://localhost:8080/getData')
      .then((response) => {
        console.log(response);
        this.sample = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
});
</script>

Child

<template>
  <div id="add">
    <form id="signup-form" @submit.prevent="submit">
      <label for="text">Text:</label>
      <input type="text" v-model="text" required>
      <p class="error" >{{ error }}</p>
      <div class="field has-text-right">
        <button type="submit" class="button is-danger">Submit</button>
      </div>
    </form>
    <button v-on:click="tryThis">
      Enlarge text
    </button>
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

interface SampleInterface {
  text: string;
  error: string;
}

export default defineComponent({
  name: 'Add',
  data: (): AddInterface => ({
    text: '',
    error: '',
  }),
  methods: {
    tryThis() {
      this.$emit('enlarge-text');
    },
    submit() {
      this.$emit('enlarge-text');
    },
  },
});
</script>

How should this be done? Is there something I've missed?

I was wondering can I still use $emit here?

@BoussadjraBrahim no errors are appearing in the console unfortunately — Keith Darragh, Oct 30 '20 at 11:44
could you enrich this codesandbox [example](https://codesandbox.io/s/vue-3-ts-y7bdv?file=/src/App.vue) with your code in order to debug it — Boussadjra Brahim, Oct 30 '20 at 11:56
I've enriched the example. It now contains a container showing a button. Then when you press the button it should output a logline for the event received in the parent container. Codesandbox: https://codesandbox.io/s/vue-3-ts-forked-gnlen — Keith Darragh, Oct 30 '20 at 12:09

score 37 · Accepted Answer · edited Sep 06 '22 at 19:07

37

You should add the new emits option containing the emitted event names :

child :

<template>
  <div id="child">
    <button v-on:click="tryThis">Enlarge text</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Child",
  emits: ["enlargeText"],
  methods: {
    tryThis() {
      console.log("trying");
      this.$emit("enlargeText", "someValue");
    },
  },
});
</script>

or with script setup syntax :

<template>
  <div id="child">
    <button v-on:click="tryThis">Enlarge text</button>
  </div>
</template>

<script lang="ts">

 const emit= defineEmits(["enlargeText"])
 
  function tryThis() {
      console.log("trying");
      emit("enlargeText", "someValue");
    }

</script>

Parent :

<template>
  <div>
    <p>Container</p>
    <Child @enlargeText="onEnlargeText" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from "./Child.vue";

export default defineComponent({
  name: "UrlContainer",
  components: {
    Child,
  },
  methods: {
    onEnlargeText() {
      console.log("enlarging text");
    },
  },
});
</script>

LIVE DEMO

edited Sep 06 '22 at 19:07

tony19

125,647
18
229
307

answered Oct 30 '20 at 13:02

Boussadjra Brahim

82,684
19
144
164

1

I've ran this in the demo and I don't see the 'enlarging text' output from the onEnlargeText function. I think this should be output here? – Keith Darragh Oct 30 '20 at 13:12
1

It works with `camelCase` format please check this https://codesandbox.io/s/vue-3-ts-forked-3kg1q?file=/src/components/Container.vue – Boussadjra Brahim Oct 30 '20 at 13:21
I haven't downvoted, don't worry you've been so helpful! Why does this need to be camelcase? In the docs it says it should be event name casing? – Keith Darragh Oct 30 '20 at 13:36
1

i know that you didn't do that, i think it's a bug i post this [answer](https://stackoverflow.com/a/64607826/8172857) in which i recommend to use `cabeb-case` but when i tried that with vue 3 it doesn't work – Boussadjra Brahim Oct 30 '20 at 13:39
Fair enough! This works with canal case, I'm going to mark as complete :) – Keith Darragh Oct 30 '20 at 13:45
I will post an issue in vue-next repo – Boussadjra Brahim Oct 30 '20 at 13:49
1

this the [issue](https://github.com/vuejs/vue-next/issues/2526) that i posted – Boussadjra Brahim Oct 30 '20 at 14:00

score 0 · Answer 2 · answered Apr 11 '23 at 11:51

Or could use v-model and update event:

// ChildComponent.vue
<template>
  <div>
    <input type="button" @click="increment" value="Click" />
    childCounter: {{ childCounter }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      childCounter:0
    }
  },
  methods: {
    increment() {
      // emit custom update event to update the parent value
      this.$emit('update:childCounter', ++this.childCounter);
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <div>
    <!-- basically means:
      <Child :childCounter="parentCounter" 
             @update:childCounter="(childCounter) => parentCounter = childCounter"
    />
    -->
    <Child v-model:childCounter="parentCounter"></Child>
    parentCounter: {{ parentCounter }}<br/>
  </div>
</template>

<script>
import Child from './ChildComponent.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentCounter: 0
    }
  },
}
</script>

Vuejs 3 emit event from child to parent component

2 Answers2

Linked