vue.js孩子父母組件通信

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 .Y OU可以使用空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上看到更多細節。