[Vuejs]-Problems with emit event in child component

by

1👍

✅

After your edit where you added the method to the parent, you removed the method from the child. You still need a method in the child to use $emit. And you need one in the parent if you want it to react to the signal with the console.log().

I don’t use pug, and didn’t try to run this code, but the idea should be clear enough to make it work.

parent-component

<template lang="pug">
  child-component(v-on:signal="weAreHere") 
</template>

export default {
  name: "Playlist",
  data () {
    return { }

  },
component: {
  child-component
},
methods: {
  weAreHere() {
    console.log("here we are!")
  }
}
...

child-component

<template>
  .mainBox1
    button.burgerMenu(v-on:click="signalParent")
</template>

export default {
  name: "child-component",
  data () {},
  methods: {
    signalParent() {
      this.$emit('signal')
    }
  }
...
👤shanemgrey

3👍

I see your confusion. You’re attempting to reference the child component’s method from the parent. You have a child component using emit to contact the parent which you expect to call the method in the child. You should call the child method in the child component. You don’t need to emit anything.

Use $emit when you want the parent to do something.

For example:

Parent

<template>
     <ChildComponent v-on:signal="myMethod"/>
</template>

<script>
     methods: {
          myMethod() {
               //do something in parent after emit from child
          }
     }
</script>

In child:

someMethod () {
     this.$emit('signal')
}

When the parent receives ‘signal’, they will call myMethod.

👤Arc

Leave a comment