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

我遇到了同样的问题。

您可以将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中导入模式组件并将其插入到带有首选引用名称的模板，因此您也可以使用 $ refs：

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

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

1 个答案: