CODEWITHSUNDEEP
vue.js
anna
anna

Reputation: 1149

problems with emit event in child component

I still don't understand how emit event, which show my component-one (child). I know I do something wrong, but don't know exactly what. One-component should be hide. Then after click should show. Any help?

parent component

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

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

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

one-component

<template>
  .mainBox1
    button.burgerMenu(v-on:click="$emit('welcome')")

   export default {
     name: "one-component",
     data () {
           return {
             show: true,
                 }
      },

Upvotes: 0

Views: 401

Answers (2)

shanemgrey
shanemgrey

Reputation: 2378

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')
    }
  }
...

Upvotes: 1

Arc
Arc

Reputation: 1078

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.

Upvotes: 3

Related Questions