How can I call method in global vue component?

Question

I have root vue component app.js:

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

I have a child component like this:

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

The modalShow method is in the root. How can I call it from the child?

If the code above is executed now, I get the following error:

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

Do you mean the root Vue? Is your component a direct child of the root? — Bert

Bert Bert · Accepted Answer · 2017-07-14T03:44:04

Pass the modalShow method down to the child component.

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

export default {
  props:["modalShow"]
}

Then you can use the method in the child.

How can I call method in global vue component?

1 Answers