Vue.js vuejs中另一个组件中的访问模式

我开始和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>

---

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

我面临着同样的问题

您可以将

modalShow

字段作为道具传递到

BaseLayout.vue

将组件和修改模式设置为

..

().
但我发现如果模态窗口在一个单独的组件中，这种方法相当复杂。 这是因为您必须在所有系统中传递、发出和处理modalShow变量状态 水平

我觉得第二种方式更简洁、更时尚

在

BaseLayout.vue

add

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>

---

您是否希望将事件从一个组件传递到另一个不是其直接父组件的组件？有几种方法可以做到这一点。或者，您也可以按照所述在

$root

上发出事件。非常感谢，我已经设法打开了它，就像我现在打开主体中的元素一样。只是一个无关的建议：如果您是Vue新手，请使用@Vue/cli而不是模板。

methods: {
  showModal(){
    this.$refs.modal1.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>

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