vue.js - 如何在全局Vue组件中调用方法？

我有根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>

modalShow方法在根中。我怎么能从孩子口中说出？
如果现在执行上述代码，则会出现以下错误：
[vue warn]：属性或方法“modalshow”未在
实例，但在呈现期间引用。一定要申报无功
数据选项中的数据属性。

最佳答案

将modalShow方法传递给子组件。

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

export default {
  props:["modalShow"]
}

然后你可以在孩子身上使用这种方法。