vue 컴포넌트에서 App.vue 메서드를 호출하는 방법

vue 컴포넌트에서 App.vue 메서드를 호출하는 방법

아래와 같이 vue 컴포넌트와 vue 요소 선언이 있습니다.

Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
    methods: {
        test: function() {
            
            // I am getting an error here
            app.aNewFunction();
        }
    }
})

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    methods: {
        aNewFunction: function() {
            alert("inside");
        }
    }
}) 

vue 구성 요소에서 vue app의 메서드를 호출하려면 어떻게 해야 합니까?

루트 인스턴스 메서드는 다음과 같이 실행할 수 있습니다.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");
        }
    }
})

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...';
        },
    }
});

언급URL : https://stackoverflow.com/questions/43292810/how-to-call-methods-in-app-vue-from-the-vue-components