Как скрыть блок в одном компоненте по клику по кнопке в другом компоненте vue?

Question

[Serge999111]

Добрый день.

Подскажите. Есть кнопка в компоненте меню. Как при клике на кнопку, скрыть div, который находится в другом компоненте?

Оба компонента регистрируются локально на одной странице.

Спасибо.

Answer 1

[Дмитрий Гололобов]

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

<component-one v-on:click-some-button="hideBlockkInOtherComponent"></component-one>
   <component-two ref="othercomponent"></component-two>

methods: {
    hideBlockkInOtherComponent () {
         this.$refs.othercomponent.hideBlock();
    }
}

component-one:

<div><button v-on:click="sendClickForParent">click</button></div>

methods: {
    sendClickForParent () {
         this.$emit('click-some-button');
    }
}

component-two:

<div>
       <div v-if="showBlock">my block</div>
   </div>

data () {
    return {
        showBlock: true,
    };
},
methods: {
    hideBlock () {
         this.showBlock = false;
    }
}