vue.js child-parent component communication

Question

I am trying to call functions from my component to my vue for login.

this is my component :

Vue.component('auths', {
  data: function() {
    return {
      ip: '',
      sessiontoken: ''
    }
  },

  ready: function() {
    this.settoken();
    this.getip();
  },

  methods: {

    getencrypteduser: function() {},

    createauthentification: function(event) {

      console.log(moment().format('LLLL'));

      var data = {
        '_links': {
          'type': {
            'href': 'http://example.com/rest/type/node/authenfication'
          }
        },
        'title': [{
          'value': 'cccccccc'
        }],
        'field_id': [{
          'value': this.$cookie.get('test')
        }],
        'field_ip': [{
          'value': this.ip
        }],
        'field_va': [{
          'value': 'Basic ' + window.btoa(this.user + ':' + this.password)
        }],
        'field_expiration': [{
          'value': '2016-08-01T14:30:00'
        }]
      }

      this.$http.post('http://example.com/entity/node?_format=hal_json', data, function(response) {
        console.log(response);
        this.$set('success', 'ok');
        this.$route.router.go('/');

      }, {
        headers: {
          'Accept': 'json',
          'Content-Type': 'application/hal+json',
          'Authorization': 'Basic ' + window.btoa(this.user + ':' + this.password),
          'X-CSRF-Token': this.sessiontoken
        }
      }).error(function(response) {
        this.$set('message', 'Désolé, nous ne avons pas réussi à vous authentifier. Réessayez.');
        this.$set('error', true);
      });

      this.$cookie.set('test', 'Hello world!', 1);
      console.log(this.$cookie.get('test'));
    },

    settoken: function() {
      this.$http.get(apiURL4, function(response) {
        this.sessiontoken = response;
        console.log(response);

      });
    },

    getip: function() {
      this.$http.get(apiURLip, function(response) {
        this.ip = response;
        console.log(response);
      });
    }
  },

  events: {
    'createauthOnChild': 'createauthentification'
  }

})

and I want to use that event in here:

var login = Vue.extend({
  template: '#login',

  data: function() {
    return {}
  },

  ready: function() {},

  methods: {

    getauthentifications: function(event) {
      this.$http.get('http://example.com/application/authentification', function(response) {

        console.log(response);

      }, {
        headers: {
          'Accept': 'json',
          'Content-Type': 'application/hal+json',
          'Authorization': 'Basic ' + window.btoa(this.user + ':' + this.password)
        }
      });



      this.$on('createauthOnChild');


    }
  }
})

There is no error or anything but createauthOnChild is not calling the createauthentification function. Could anyone tell me what I have done wrong?

Answer 1

I am not sure of following syntax.

events: {
  'createauthOnChild': 'createauthentification'
}

As you want to call method of other events, you can implement a event bus.Y ou can use an empty Vue instance as a central event bus:

var bus = new Vue()

// in component A's method
bus.$emit('id-selected', 1)

// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

In more complex cases, you should consider employing a dedicated state-management pattern.

You can see more details on dedicated state management on answer here and here.