vue.js 2의 다른 구성 요소에서 메소드를 호출하려면 어떻게 해야 하는가?

vue.js 2의 다른 구성 요소에서 메소드를 호출하려면 어떻게 해야 하는가?

이와 같은 첫 번째 구성 요소:

<template>
    ...
</template>
<script>
    export default {
        ...
        methods: {
            addPhoto() {
                const data = { id_product: this.idProduct}
                const item = this.idImage
                this.$store.dispatch('addImage', data)
                    .then((response) => {
                        this.createImage(item, response)
                    });
            },
        } 
    }
</script>

addPhoto 메서드가 호출되면 ajax를 호출한 다음 응답 ajax를 받는다.

메서드 createImage에 응답 아약스와 다른 파라미터를 보내고 싶다.메서드 createImage는 다른 구성 요소(두 번째 구성 요소)에 위치함

이와 같은 두 번째 구성 요소:

<template>
    <div>
        <ul class="list-inline list-photo">
            <li v-for="item in items">
                <div v-if="clicked[item]">
                    <img :src="image[item]" alt="">
                    <a href="javascript:;" class="thumb-check"><span class="fa fa-check-circle"></span></a>
                </div>
                <a v-else href="javascript:;" class="thumb thumb-upload"
                   title="Add Photo">
                    <span class="fa fa-plus fa-2x"></span>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        ...
        data() {
            return {
                items: [1,2,3,4,5],
                clicked: [], // using an array because your items are numeric
            }
        },
        methods: {
            createImage(item, response) {
                this.$set(this.clicked, item, true)
            },
        }
    }
</script>

두 번째 구성 요소에서 createImage 메서드를 실행하고 그 후에 두 번째 구성 요소에서 요소를 변경할 수 있는 방법은?

부모/자녀 관계가 없는 두 요소는 없다.그것들은 모두 루트 vue 인스턴스를 통해 연결된다.루트 vue 인스턴스에 액세스하려면 다음을 호출하십시오.this.$root루트 인스턴스(instance)를 얻는다.

....
.then((response) => {
    this.$root.$emit('createImage', item, response)
});

그리고 두 번째 구성 요소에서 트리거되어야 하는 기능을 만든다.

...
mounted() {
    this.$root.$on('createImage', (item, response) => {
        // your code goes here
    })
}

그것은 소켓과 같은 역할을 한다.이 이벤트는 다음과 같은 이유로 전세계적으로 이용 가능함$root.

N.B. 글로벌 창 개체에 vue 인스턴스를 추가하는 것은 잘못된 관행이다.

만약 이 두 구성 요소가 형제자매(부모와 자녀가 없음)라면, 한 가지 해결책은 이벤트 버스를 이용하는 것이다.

일반적인 아이디어는 다음과 같은 글로벌 이벤트 핸들러를 구축하는 것이다.main.js

window.Event = new Vue();

그런 다음 첫 번째 구성 요소 화재 시 다음과 같은 이벤트 발생:

....
.then((response) => {
     Event.$emit('createImage', item, response)
});

그리고 두 번째 컴포넌트에는 듣기 위한 핸들러를 등록한다.createImage에 있어서의 사건.mounted()훅:

...
mounted() {
    Event.$on('createImage', (item, response) => {
        // your code goes here
    }
}

이 터토리를 읽고 이 스크린캐스트를 보면 더 많은 정보를 찾을 수 있다.

참조URL: https://stackoverflow.com/questions/45097278/how-can-i-call-method-in-other-component-on-vue-js-2