如何用道具动态挂载vue组件

Question

场景/上下文

我有一个概述组件，其中包含一个表和一个添加按钮。add按钮打开一个模态组件。当我在模式中填写一些文本字段并单击“保存”按钮时，将调用一个回调(给定为“支柱”)，以便更新父组件(概述)。保存按钮还会触发模型切换函数，从而关闭模型。

到目前为止，所有的工作，如预期，但当我想添加第二个条目，模式是“预先填充”的数据，最近添加的项目。

在我看来，发生这种情况是因为模型组件一直挂在后台(所以它只是隐藏的)。当触发切换功能时，我可以通过“重置”modals数据来解决这个问题，但是我认为应该有一个更好的方法。

当我想在一个模式中获取数据时，我也有一个类似的问题。目前，我在模态的挂载钩子中调用提取函数。因此，在本例中，当父组件挂载该模型时，会发生提取。这是没有意义的，因为它只应该(和每次)在模式打开时获取。

我认为解决这个问题的最好方法是当我单击"add“(打开模式)按钮时动态地挂载模态组件，但是我无法找到如何实现这个目标。这也避免了许多组件被安装在后台，而这些组件可能不被使用。

截图

​

示例代码

概述：

<template>
  <div>
    // mount of my modal component
    <example-modal
        :toggleConstant = modalToggleUuid
        :submitHandler = submitHandler />
    // The overview component HTML is here
    </div>
</template>

<script>
  export default {
    data() {
      return {
                modalToggleUuid: someUuid,
                someList: [],
            }
    },

    mounted() {

    },

    methods: {
          showModal: function() {
        EventBus.$emit(this.modalToggleUuid);
      },

            submitHandler: function(item) {
                this.someList.push(item);
            }
    }
  }
</script>

模态：

<template>
  <div>
    <input v-model="item.type">
    <input v-model="item.name">
    <input v-model="item.location">
    </div>
</template>

<script>
  export default {
    data() {
      return {
                modalToggleUuid: someUuid,
                item: {},
            }
    },

    mounted() {
            // in some cases i fetch something here. The data should be fetched each time the modal is opened 
    },

    methods: {
          showModal: function() {
        EventBus.$emit(this.modalToggleUuid);
      },

            submitHandler: function(item) {
                this.someList.push(item);
            }
    }
  }
</script>

问题

处理上述情况的最佳实践方法是什么？

我应该挂载模态组件dynamically?

• Do吗?我应该正确地挂载组件，并且应该一直重置内容吗？

Answer 1

您已经走上了正确的道路，为了实现您想要的目标，您可以像这样使用v-if解决方案来解决这个问题--然后每次切换模式时都会运行mounted()钩子，并且当您不使用它时，它也不会出现在DOM中。

<template>
  <div>
    // mount of my modal component
    <example-modal
      v-if="isShowModal"
      :toggleConstant="modalToggleUuid"
      :submitHandler="submitHandler"
    />
    // The overview component HTML is here
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowModal: false,
      modalToggleUuid: someUuid,
      someList: []
    };
  },

  mounted() {},

  methods: {
    showModal: function() {
      this.isShowModal = true;
    },

    submitHandler: function(item) {
      this.someList.push(item);
      this.isShowModal = false;
    }
  }
};
</script>