如何在全局 vue 组件中调用方法？

Question

我有根 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 警告]：属性或方法“modalShow”未在 实例，但在渲染期间引用。确保声明反应式 数据选项中的数据属性。

Answer 1

将modalShow 方法传递给子组件。

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

export default {
  props:["modalShow"]
}

那么就可以在child中使用方法了。