どのようにVUEのコンポーネントとVUE要素宣言を持っているVUEコンポーネント

Question

からVUEアプリでメソッドを呼び出すには？あなたは、このようにルートインスタンスメソッドを実行することができ

Answer 1

：this.$root.methodName()

Vue.component('todo-item', { 
     template: '<li>This is a todo</li>', 
     methods: { 
     test: function() { 
      this.$root.aNewFunction(); 
     } 
     }, 
     mounted() { 
     this.test(); 
     } 
    }) 

    new Vue({ 
     el: '#app', 
     template: '<todo-item></todo-item>', 
     methods: { 
     aNewFunction: function() { 
      alert("inside"); 
     } 
     } 
    }) 

Answer 2

私はそれがよりVuejsアーキテクチャに従うと思う別の解決策は、通信を行うために、子コンポーネントとその親の間でイベントリスナー&エミッタを使用することです。

Vue.component('todo-item', { 
    template: '<li>This is a todo</li>', 
    methods: { 
    test: function() { 
     console.log('Emmit this Event.'); 
     this.$emit('yourevent'); 
    } 
    }, 
    created() { 
    this.test(); 
    } 
}); 

new Vue({ 
    el: '#vue-app', 
    data: { 
    'message': '', 
    }, 
    methods: { 
    aNewFunction(event) { 
     console.log('yourevent Is Triggered!'); 
     this.message = 'Do Stuff...'; 
    }, 
    } 
});