0

Здравствуйте.

Полный нуб в Vue и до этого не сталкивался с подобными библиотеками.

Есть компонент и я хочу вызвать метод дочернего компонента. И не могу понять как это правильно сделать. По документации я понимаю что могу только значение передать(props), а событие вызвать может только дочерний компонент у родителя. Пробовал через $on\$emit, но ни ошибки ни результата.

Или правильно значение в переданном параметре через props и отслеживать его в дочернем, если изменился то запустить метод.

В общем в полном не понимании, направьте пожалуйста в нужное направление.

Заранее спасибо!

Родительский компонент:

<template>
    <b-tab v-on:click="initReviews" title="Отзывы">
        <reviews></reviews>
    </b-tab>
</template>

<script type="text/babel">
    import reviews from './reviews/reviews.vue';

    export default {
        data() {
            return {
            }
        },
        components:{
            reviews
        },
        methods:{
            initReviews:function(){
                console.log("Click reviews tab! init ...");
                // Как тут обратиться к reviews.init() ?
            }
        }
    }
</script>

Дочерний компонент:

<template>
    <div>
        <div v-if="showLoader">Загружаем отзывы ...</div>
        <div v-else>список отзывов!</div>
    </div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                showLoader:true,
            }
        },
        methods:{
            init:function () {
                console.log("child init ...");
                this.showLoader = false;
            }
        }
    }
</script>

1 ответ 1

1

Прокидывайте showLoader пропсом в дочерний, если решили контролировать.

5
  • Так перед тем как снять блок "загрузка" нужно подтянуть отзывы с сервера. Это нужно ставить слушателя на этот пропс в дочернем компоненте на изменения значения?
    – mrFlyer
    7 сен 2017 в 18:32
  • 1
    Зависит от вашего кейса. Но то что предлагаете вы, это конкрЭтный антипаттерн. 7 сен 2017 в 18:43
  • Можете тогда шаги действий подсказать? Понимаю что антипаттерн, а как правильно не понимаю.
    – mrFlyer
    7 сен 2017 в 18:44
  • Конечно. Вот вам пример webpackbin.com/bins/-KtSlC70vEVyoQ9egOLl 7 сен 2017 в 19:36
  • Спасибо огромное, буду пробовать!
    – mrFlyer
    8 сен 2017 в 4:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.