vue.js - 如何在全局 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 warn]: Property or method "modalShow" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Answer 1

将 modalShow 方法向下传递给子组件。

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

export default {
  props:["modalShow"]
}

然后就可以在child中使用这个方法了。