Как вызвать метод в компоненте с одним файлом из другого компонента с одним файлом VueJS

Question

У меня есть три компонента. Я хочу запустить метод show(), который находится в компоненте overlay.vue, из компонента about.vue

Я новичок так что я буду sh, если я найду некоторую помощь от вас, ребята

сначала это overlay.vue

<template>
    <div class="overlay"></div>
</template>

<script>
export default {
    name: "overlay",
    methods: {
        show() {
            document.querySelector(".overlay").style.display = "block";
        }
    }
};
</script>

второе - about.vue

<template>
    <section class="about">
        <div class="container">
            <div class="row video">
                <div class="col-lg-6 order-lg-1 order-2">
                    <img
                        class="dots img-fluid"
                        src="../assets/images/dots.svg"
                        alt="dots"
                    />
                    <div class="video-wrapper">
                        <div class="video-img">
                            <img
                                class="img-fluid"
                                src="../assets/images/video.png"
                                alt="#"
                            />
                        </div>
                        <div class="video-i">

                            <!-- ***************************************************************
                            ***** this is where i want to trigger the method using this below a tag*****
                            *************************************************** -->
                            <a href="#"><i class="fas fa-play"></i></a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

Третий, который является родителем app.vue, куда я импортирую about.vue и overlay.vue

<template>
    <div id="app">
        <overlay></overlay>
        <about></about>
    </div>
</template>

<script>
import overlay from "./components/overlay";
import about from "./components/about";
export default {
    name: "App",
    components: {
        about,
        overlay
    }
};
</script>

Answer 1

, поскольку эти два компонента являются родными и не импортированы друг в друга, я не могу использовать $ ref, и лучший выбор - использовать Store

это мой код магазина

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        showOverlay: false
    },
    mutations: {
        //showing the overlay
        TOGGLE_OVERLAY(state, payload) {
            state.showOverlay = payload;
        }
    },
    actions: {
        //showing the overlay
        toggleOverlay(context, payload) {
            context.commit("TOGGLE_OVERLAY", payload);
        }
    },
    getters: {
        getStatus: state => state.showOverlay
    }
});

и вот куда я его отправляю. Я отправляю его из about.vue или любого другого компонента

<a @click.prevent="toggleOverlay" href="#"><i class="fas fa-play"></i></a>

    methods: {
        toggleOverlay() {
            this.$store.state.showOverlay = !this.$store.state.showOverlay;
            this.$store.dispatch(
                "toggleOverlay",
                this.$store.state.showOverlay
            );
        }
    }

Answer 2

Вы можете сделать что-то вроде этого, в вашем app.vue установить переменную, чтобы показать ваш overlay.vue или нет. А затем в overlay.vue установите props, которые изменят стиль вашего компонента. Это решение не использует манипуляцию домом.

1. app.vue

<template>
    <div id="app">
        <overlay :show="show_overlay"></overlay>
        <about></about>
    </div>
</template>

<script>
import overlay from "./components/overlay";
import about from "./components/about";
export default {
    name: "App",
    data(){
        return {
            show_overlay:false
        }
    },
    components: {
        about,
        overlay
    }
};
</script>

overlay.vue

<template>
    <div class="overlay" :style="[(this.show) ? 'display:block' : 'display:none']"></div>
</template>

<script>
export default {
    name: "overlay",
    props:{
        show:{
            default:false,
            type:Boolean
        }
    }
};
</script>