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

场景/背景

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

到目前为止，一切正常，但当我想添加第二个条目时，模式是“预先填充”最近添加的项目的数据

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

当我想在模式中获取数据时，我会遇到类似的问题。目前，我在modal的挂载钩子中调用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>

//安装我的模态组件
//概览组件HTML在这里
导出默认值{
数据（）{
返回{
modalToggleUuid:someUuid，
someList:[]，
}
},
安装的（）{
},
方法：{
showmodel:function（）{
EventBus.$emit（this.modalToggleUuid）；
},
提交人：功能（项）{
this.someList.push（项目）；
}
}
}

模态：

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

导出默认值{
数据（）{
返回{
modalToggleUuid:someUuid，
项目：{}，
}
},
安装的（）{
//在某些情况下，我会在这里提取数据。每次打开模式时都应该提取数据
},
方法：{
showmodel:function（）{
EventBus.$emit（this.modalToggleUuid）；
},
提交人：功能（项）{
this.someList.push（项目）；
}
}
}

问题

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

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

---

您走的是正确的道路，为了实现您想要的，您可以使用

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>

//安装我的模态组件
//概览组件HTML在这里
导出默认值{
数据（）{
返回{
伊莎：错，
modalToggleUuid:someUuid，
someList:[]
};
},
挂载（）{}，
方法：{
showmodel:function（）{
this.isshowmodel=true；
},
提交人：功能（项）{
this.someList.push（项目）；
this.isshowmodel=false；
}
}
};

实现我想要的东西的好方法！，这是“Vue方式”还是仅仅是一项工作？是否还建议/最佳做法是在需要时始终仅加载DOM中的组件？例如，性能或资源使用情况？或者这仅仅是为了实现一些特定的需求，比如在我的例子中？目前我使用事件

e.$emit（theModalId

，args）和e.$on（theModalId，（args）=>{do something}来切换我的模式。当我使用您的v-if建议时，默认情况下，我可以在组件安装上显示模态，但在某些情况下（例如编辑模态），我会错过args功能。用v-if加载模态组件并触发事件来显示它感觉很难看，有更好的方法吗？我可以先设置一个变量，然后用var作为道具加载组件以避免事件发生，但这感觉有点粗糙……只有在需要的时候才有东西总是好的，Vue中的经验法则是这样的：如果初始化很繁重-使用v-show，如果相对容易-使用v-if。这绝对是最佳实践，而不是权宜之计。关于传递道具-传递道具的好方法不是在活动中传递，而是将它们作为道具传递，例如

。感谢您的回答和清晰的回答！我没有得到实体部分，因为在使用v-if切换组件之前，我已经需要定义道具了。这是否意味着我需要定义一个占位符变量（并将其作为prop）-当单击编辑按钮时，用

entityToEdit

填充它，然后切换if？是的，有多种可能的方法来实现这一点-包括带有事件的方法（有一个侦听器包装模态并在那里传递实体），但他们最终都会做同样的事情-显示模式并传递可编辑的内容，因为这就是Vue中的工作方式。不同的方法是将可编辑实体存储在Vuex中，但道具方法看起来更清晰。