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

然後你可以在孩子中使用該方法。