访问 vuejs 中另一个组件中的模态答案

【问题标题】：Access modal that is in another component in vuejs访问 vuejs 中另一个组件中的模态
【发布时间】：2020-04-21 16:24:30
【问题描述】：

我开始使用 vuejs。我已经下载了一个模板开始系统的开发；在我想使用模态之前，一切都是正确的。它位于一个名为 baseLayout.vue 的组件中，我尝试在另一个组件的方法中使用它。是否有可能我可以从另一个组件操作它？我想打开它，用其他元素更新正文。我的代码片段如下：

baseLayout.vue

<template>
<b-modal id="modal1" ref="modal1" title="Bootstrap-Vue">
    <p class="my-4">Hello from modal!</p>
</b-modal></template>

我尝试从这里 Analytics.vue 使用它

<template>
<button class="btn-pill btn-shadow btn-wide fsize-1 btn btn-danger btn-lg" v-on:click="showModal()">ShowModal</button></template>

在脚本中：

methods: {
  showModal(){
    this.$refs.modal1.show()
  }
}

我找不到一种方法来操作组件中的模式。而且我必须从那里使用它，因为如果我把它放在当前组件中，它会被标题和其他元素叠加。

【问题讨论】：

您是否真的想将事件从一个组件传递到另一个不是其直接父级的组件？有几种方法可以做到这一点。或者，您可以在$root 上发出事件，如here 所述
非常感谢，我已经成功打开了它，现在我正在做的就是清除它在体内的元素。
只是一个不相关的建议：如果您是 Vue 新手，使用 @vue/cli 代替模板可能会有所帮助。

标签： vue.js modal-dialog bootstrap-vue

【解决方案1】：

我也遇到了同样的问题。

您可以将modalShow 字段作为道具传递给BaseLayout.vue 组件并将模态修改为
<b-modal v-model="modalShow">...</b-modal> (BootstarpPropExample)。
但是如果模态窗口在一个单独的组件中，我发现这种方式非常复杂。那是因为你必须在所有变量中传递、发出和处理 modalShow 变量状态级别。

恕我直言，第二种方式更简洁、更漂亮

在BaseLayout.vue 中添加show() 方法：

<template>
    <b-modal id="modal1" ref="modal1" title="Bootstrap-Vue">
        <p class="my-4">Hello from modal!</p>
    </b-modal>
</template>

<script>
    export default {
        methods: {
            show() {
                this.$refs.modal1.show();
            }
        }
    }
</script>

并在Analytics.vue导入模态组件并将其插入具有更好的参考名称的模板，因此您也可以使用以下方法调用他的方法 $参考：

<template>
    <div>
        <button class="btn-pill btn-shadow btn-wide btn btn-danger btn-lg" @click="showModal()">
            ShowModal
        </button>
        <BaseLayout ref="modalComponent"/>
    </div>
</template>

<script>
    import BaseLayout from "./BaseLayout";

    export default {
        components: {
            BaseLayout
        },
        methods: {
            showModal() {
                this.$refs.modalComponent.show();
            }
        }
    }
</script>

【讨论】：