Question

我正在尝试将我的组件中的函数调用到我的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函数外，没有任何错误或任何错误。谁能告诉我我做错了什么？

Answer 1

我不确定遵循语法。

events: {
  'createauthOnChild': 'createauthentification'
}

由于您想调用其他事件的方法，您可以实现event bus。您可以使用空的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) {
  // ...
})

在更复杂的情况下，您应该考虑使用专用的state-management pattern。

您可以在回答here和here上查看有关专用状态管理的更多详细信息。

vue.js子父组件通信

1 个答案: