如何在全局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"] 
} 

然后你可以在孩子中使用该方法。