如何使用 props 动态挂载 vue 组件

Question

场景/上下文

我有一个概览组件，其中包含一个表格和一个添加按钮。添加按钮打开一个模态组件。当我在模式中填写一些文本字段并单击保存按钮时，会调用一个回调（作为道具给出），以便更新父组件（概述）。保存按钮还会触发模型切换功能，因此模型会关闭。

到目前为止，一切都像预期的那样工作，但是当我想添加第二个条目时，模式是用最近添加的项目的数据“预填充”的。

我很清楚这是因为模型组件一直挂载在后台（所以它只是隐藏了）。我可以通过在触发切换功能时“重置”模态数据来解决这个问题，但我认为应该有更好的方法。

当我想在模式中获取数据时，我遇到了类似的问题。目前我在模式的挂载钩子中调用 fetch 函数。所以在这种情况下，当父组件挂载模态时，就会发生获取。这没有意义，因为它应该只（并且每次）在打开模式时获取。

我认为解决此问题的最佳方法是在我单击“添加”（打开模式）按钮时动态安装模式组件，但我找不到如何实现这一点。这也避免了后台挂载了很多可能不使用的组件。

截图

示例代码

概述：

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

问题

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

• 我应该动态挂载模态组件吗？
• 我是否正确安装了组件，我是否应该一直重置内容？

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>