Question

场景/上下文

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

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

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

我想以模式获取数据时遇到类似的问题。目前，我在模态的已安装挂钩中调用提取函数。因此，在这种情况下，提取将在父组件安装模式时发生。这是没有意义的，因为打开模态时应该（每次）获取。

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

屏幕截图

示例代码

概述：

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

如何使用道具动态安装Vue组件

1 个答案: