글로벌 vue 컴포넌트에서 메서드를 호출하려면 어떻게 해야 합니까?

글로벌 vue 컴포넌트에서 메서드를 호출하려면 어떻게 해야 합니까?

root vue 컴포넌트 app.js:

...
const app = new Vue({
    el: '#app',
    ...
    methods: {
        modalShow: function(target, id=null, message=null){
           ...
        },
        ...
    }
});

다음과 같은 하위 구성 요소가 있습니다.

<template>
    <div>
        <ul>
            <li> 
                <a href="#" class="thumbnail"
                   title="Add photo" 
                   @click="modalShow('modal-add-photo', product.id)"
                > 
                    <span class="fa fa-plus fa-2x"></span> 
                </a> 
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        ...
        methods: {
            ...
        }
    }
</script>

그modalShowmethod는 루트에 있습니다.아이한테 뭐라고 해야 되지?

위의 코드가 지금 실행되면 다음 오류가 나타납니다.

[Vue warn] :속성 또는 메서드 "modalShow"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.

패스 더modalShow메서드를 하위 구성 요소까지 줄입니다.

<child :modal-show="modalShow"></child>

export default {
  props:["modalShow"]
}

그런 다음 아이에서 이 방법을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/45094010/how-can-i-call-method-in-global-vue-component