访问模态位于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）。
   但是，如果模态窗口在单独的组件中，我发现这种方式非常复杂。那是因为您必须通过，发射和处理模态在所有人中的变量状态级别。

IMHO第二种方法更可隔离，更奇特

2. 在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>