How to hide a block in one component on click of a button in another vue component?

Question

Vue.js

Good afternoon.

Tell. There is a button in the menu component. How to hide a div that is in another component when clicking on a button?

Both components are registered locally on the same page.

Thank you.

Answer 1

parent component:

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