Как я могу вызвать метод в глобальном компоненте vue?

У меня есть корневой компонент 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]: свойство или метод "modalShow" не определено в экземпляре, но на него ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в параметре данных.


vue.js vuex vuejs2 vue-component global
person Success Man    schedule 14.07.2017    source источник
comment
Вы имеете в виду корневой Vue? Является ли ваш компонент прямым потомком корня?   -  person Bert    schedule 14.07.2017
comment
@ Берт Эванс, да, это то, что я имею в виду   -  person Success Man    schedule 14.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Передайте метод modalShow дочернему компоненту.

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

export default {
  props:["modalShow"]
}

Затем вы можете использовать этот метод у ребенка.

person Bert    schedule 14.07.2017
comment
@TrendingNews Тебе не нужно отмечать меня. Если это вопрос с тегом Vue, я увижу его :) - person Bert; 14.07.2017
comment
Хорошо. Извини, я не буду отмечать тебя снова - person Success Man; 14.07.2017