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

Question

我开始使用 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()
  }
}

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

Answer 1

我遇到了几乎同样的问题。

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>