Javascript 为什么要保留；模态背景淡出显示“；当相关组件未安装时存在，我应如何；“删除/禁用”；这个部门

形势

我有一个vue组件，其中包含一个子组件，该子组件应显示模态。 当我切换

isShowModal

bool（通过按钮或Vue devtools）时，会显示模式。当我单击模式中的关闭按钮（或在devtools中切换

isShowModal

）时， 模式已关闭。到目前为止，这与预期的效果一样

当我再次尝试通过单击按钮打开模式来打开模式时，它不起作用。我注意到，

模式背景

仍然“存在”（作为不可见的覆盖）。 当

模态组件

卸载时，我不理解为什么会发生这种情况

当我通过devtools控制台用命令

$（“#”+idHere.modal（“hide”）关闭模式时隐藏模式，包括背景

注意：我有一些原因想挂载/卸载组件以显示/关闭模式。出于这个原因，调用
$（“#”+“idHere”）.modal（“show/hide”）调用evens不是一个选项吗
我尝试了同样的事件，只是为了测试的目的，比模态包括背景完美隐藏

下面的代码不是真正的代码，因为它包含的逻辑比这个问题所需的多。当涉及到父/模型切换功能时，示例代码非常适合我的代码。
模态组件的模板几乎完全复制自我的代码

问题


卸载模态组件时，如何关闭/删除/禁用背景（无论正确的术语是什么）
我使用的装载/卸载组件的方法是正确的吗
像我在Vue中那样切换情态动词是最佳实践吗

示例代码

父组件示例：

<template>
    <div>
      <modal-component
        title = "Zone"
        v-if = "isShowModal"
                :closeCallback = "() => { isShowModal = false }" />

        // Some button that toggles the isShowModal bool 
    </div>
</template>

<script>
  export default {
    mounted() {

    },
    data() {
      return {
        isShowModal: false,
      }
    },
      showZoneNewModal: function(zone) {
            this.isShowModal = true;
        },
    }
</script>

<template>
  <div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
                  <button type="button" class="close" v-on:click="closeCallback()" aria-label="Close">
            <span aria-hidden="true">×</span>
                  </button>
          <h4 class="modal-title">{{ title }}</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            // some header content
          </div>
        </div>
        <div class="modal-footer">
          // some body content
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      closeCallback: { type: Function, required: true },
        }
    mounted() {
      $("#" + this._uid).modal('show');
    },
        beforeDestroy() {
      $("#" + this._uid).modal("hide");
    },
    }
</script>

在开发工具中，第2项看起来像这样。这也是保持“活跃/活跃”的一个。在我的两个组件中的一个组件中，我找不到具有
modal background
类的div。（也找不到任何关于grep的信息）


当我在
div
包装器上放置
v-if
时，你会没事的（可能）

与
中的任何其他HTML标记一样，此背景
div
是组件的一部分，在移除组件时将被移除

另外，不要使用#id，Vue不需要它，也没有理由这样做，如果您想针对特定元素，可以使用
$ref

最后一个-不要在模板中使用匿名函数，因为每次呈现模板时，Vue都会重新分配内存。您可以始终使用该方法。
正如我在
div
包装器上的-put
v-if
中响应的那样，您会没事的（可能）

与
中的任何其他HTML标记一样，此背景
div
是组件的一部分，在移除组件时将被移除

另外，不要使用#id，Vue不需要它，也没有理由这样做，如果您想针对特定元素，可以使用
$ref

最后一个-不要在模板中使用匿名函数，因为每次呈现模板时，Vue都会重新分配内存。你可以用这个方法来代替。
我看到了你的答案，但我无法完成，因为这个原因，我提出了这个新问题。。我还尝试将
包装在
div
中，并将
v-if
应用于div，而不是
模态组件
标记，但也不起作用。你的意思是我应该在子组件outer div上设置if吗<代码>…
？由于模态在
模态组件
中，并且该组件已卸载，因此我的逻辑认为它还应该清理
模态背景
div。您应该放置
v-if
以包含此div，
模态背景
。您是否正在使用一些用于模态的库？如果这是组件的一部分，那么在v-If为false之后，它肯定不应该存在……这花费了一些时间和实验，但最终我现在让它工作了（请参阅对我的问题的评论）-我不再使用#id-我不再使用事件-我知道我应该避免在
标记中使用内联函数，但在
方法：{}
中创建函数，仅仅切换bool看起来有点过火。在如此大的情况下使用内联函数的缺点是什么？当组件卸载时，Vue不会释放内存-i“unmount”（v-if=false）当模式关闭时释放内存。很好，您解决了这一问题，这并不是过分，而是正常做法。虽然内存消耗并没有那么大，但如果你有更好的方法，为什么还要这样做呢：）我看到了你的答案，但我无法完成，因为这个原因，这个新问题。。我还尝试将
包装在
div
中，并将
v-if
应用于div，而不是
模态组件
标记，但也不起作用。你的意思是我应该在子组件outer div上设置if吗<代码>…

？由于模态在

模态组件

中，并且该组件已卸载，因此我的逻辑认为它还应该清理

模态背景

div。您应该放置

v-if

以包含此div，

模态背景

。您是否正在使用一些用于模态的库？如果这是组件的一部分，那么在v-If为false之后，它肯定不应该存在……这花费了一些时间和实验，但最终我现在让它工作了（请参阅对我的问题的评论）-我不再使用#id-我不再使用事件-我知道我应该避免在

标记中使用内联函数，但在

方法：{}

中创建函数，仅仅切换bool看起来有点过火。在如此大的情况下使用内联函数的缺点是什么？当计算机运行时，Vue是否不释放内存

<template>
  <div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static">
  </div>
</template>

<div id="9" data-backdrop="static" class="modal fade in box-info show" style="display: block; padding-right: 17px;" aria-modal="true"></div>

<div class="modal-backdrop fade show"></div>