Взаимодействие дочерних и родительских компонентов vue.js

Я пытаюсь вызвать функции из моего компонента в мой vue для входа в систему.

это мой компонент:

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

})

и я хочу использовать это событие здесь:

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');


    }
  }
})

Нет никакой ошибки или чего-то еще, но createauthOnChild не вызывает функцию createauthentification. Может ли кто-нибудь сказать мне, что я сделал неправильно?


javascript vue.js vue-component
person user3423920    schedule 07.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен в следующем синтаксисе.

events: {
  'createauthOnChild': 'createauthentification'
}

Поскольку вы хотите вызывать метод других событий, вы можете реализовать шина событий. Вы можете использовать пустой экземпляр Vue в качестве центральной шины событий:

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) {
  // ...
})

В более сложных случаях следует рассмотреть возможность использования специального шаблона управления состоянием.

Вы можете увидеть более подробную информацию о выделенном управлении состоянием в ответе здесь и здесь.

person Saurabh    schedule 07.12.2016
comment
Спасибо за предложение. вы знаете об этой ошибке stackoverflow.com/questions/41021447/ - person user3423920; 07.12.2016
comment
@ user3423920 проверит это. Если вы нашли решение полезным, вы можете проголосовать и принять ответ, что сделает его более достоверным и поможет другим пользователям. - person Saurabh; 07.12.2016
comment
@ Аарон Аарон Да, и я также дал эту ссылку в ответе. - person Saurabh; 05.01.2017