Comment appeler la méthode dans le composant vue globale?

Question

J'ai composante vue racine app.js:

... 
const app = new Vue({ 
    el: '#app', 
    ... 
    methods: { 
     modalShow: function(target, id=null, message=null){ 
      ... 
     }, 
     ... 
    } 
}); 

J'ai un composant enfant comme celui-ci:

<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> 

La méthode modalShow est à la racine. Comment puis-je l'appeler de l'enfant?

Si le code ci-dessus est exécuté maintenant, je reçois l'erreur suivante:

[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

passer le méthode modalShow jusqu'au composant enfant.

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

export default { 
    props:["modalShow"] 
} 

Ensuite, vous pouvez utiliser la méthode dans l'enfant.