如何从另一个单文件组件VueJS触发单文件组件中的方法答案

【问题标题】：How to trigger a method in Single File Component from another Single File Component VueJS如何从另一个单文件组件VueJS触发单文件组件中的方法
【发布时间】：2020-03-07 12:19:55
【问题描述】：

我有三个组件我想触发位于overlay.vue 组件中的show() 方法，来自about.vue 组件

我是初学者，希望能得到你们的帮助

第一个是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>

【问题讨论】：

使用商店。在show 方法中，将存储值设置为true。然后在 about.vue 中，将显示状态绑定到要修改的 div 上。如果您在 vue 应用程序中进行 don 操作 (querySelector)，那么您可能做错了什么。
我还是做不到。 :(((((((()

标签： javascript vue.js vuejs2

【解决方案1】：

您可以这样做，在您的app.vue 中设置一个变量以显示您的overlay.vue 或不显示。然后在overlay.vue 中设置一个props 来更改组件的样式。此解决方案未使用 dom 操作。

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>

【讨论】：

您可以添加按钮或文本或其他东西，当它点击时，只需将显示变量更改为true。例如<button @click="show=true;">Show overlay</button>
对此我真的很感激，但这并不是我想要的。我想通过单击按钮或其他方式从about.vue 的兄弟组件执行此功能，而不是从app.vue 的父组件执行此功能。但也非常感谢您的回复。
哦，我才明白你的问题是什么意思
好的，先生。我真的仍然不知道如何实现这一点。
1.您可以将ref 添加到您的overlay.vue 2. 在您的href 中的about.vue 中，您可以使用$parent.$children.$refs.[ref_name].show() 调用overview.vue 的显示函数这是来自其他用户的有用示例：stackoverflow.com/questions/33682651/…

【解决方案2】：

因为这两个组件是同级的，并且没有相互导入，所以我不能使用 $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
            );
        }
    }

【讨论】：