CODEWITHSUNDEEP
vue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9859

Can't emit from one child to another

I have component, inside it I am doing emiting:

methods: {
    sendClick(e)
    {
        bus.$emit('codechange', this.mycode);
        console.log(this.selectedLanguage);
        this.$parent.sendCode();
        this.$parent.changeView();
    }

}

In the parent component I am hadling data:

var app = new Vue({
  el: '#app',
  data: {
    currentView: 'past-form',
    mycode: ''
  },
  methods:
  {
    changeView()
    {
        console.log(this.mycode);
    },

    sendCode()
    {
        console.log("Code is sended to server");
        this.currentView = 'view-form';
        bus.$emit('codechange', this.mycode);
    }   

  }, 

  created()
  {         
    bus.$on('codechange', function(mycode){
    console.log("test"); // this works
    this.mycode = mycode; // this works
    }.bind(this));

  }

})

Handling in parent work fine. But on clicking on sendCode() I want to send data to third component. The third component code:

Vue.component('view-form', {
    template: `
        <div class="ViewCodeContainer">
            <div class="ViewCode">my code here</div>
            <code> {{mycode}} </code>
            <div class="ViewCodeMenu">my menu here</div>
        </div>`,
        data() {
            return {
                mycode: ''
            }
        },
    created()
        {       
            bus.$on('codechange', function(mycode){
            console.log("hererere");
                console.log(mycode);
            this.mycode = mycode;
            }.bind(this));
            console.log("test");
        }
})

But handling of code does not working. Block console.log("hererere"); is not executed. What I am doing wrong?

Upvotes: 0

Views: 59

Answers (1)

Bert
Bert

Reputation: 82469

@Wostex is correct in this case. Essentially, your view-form component doesn't exist when the event is emitted. It doesn't exist until you change the view, which you are doing in the event handler. So there is no way for it to receive the event because your handler doesn't exist.

If your dynamic component is a child of the parent, just pass the code as a property.

<component :is="currentView" :mycode="mycode"></component>

And update your view-form component.

Vue.component('view-form', {
  props:["mycode"],
  template: `
    <div class="ViewCodeContainer">
      <div class="ViewCode">my code here</div>
      <code> {{code}} </code>
      <div class="ViewCodeMenu">my menu here</div>
    </div>`,
  data() {
    return {
      code: this.mycode
    }
  }
})

Here is a working example.

Upvotes: 1

Related Questions