如何使用 props 动态挂载 vue 组件 [英] How to dynamically mount vue component with props
问题描述
场景/上下文
我有一个概览组件，其中包含一个表格和一个添加按钮.添加按钮打开一个模态组件.当我在模态中填写一些文本字段并单击保存按钮时，会调用回调(作为道具给出)，以便更新父组件(概览).保存按钮还会触发模型切换功能，从而关闭模型.
到目前为止，一切都按预期工作，但是当我想添加第二个条目时，模态会预填充"最近添加的项目的数据.
我很清楚这是因为模型组件一直挂载在后台(所以它只是隐藏了).我可以通过在触发切换功能时重置"模态数据来解决这个问题，但我认为应该有更好的方法.
当我想在模态中获取数据时，我遇到了类似的问题.目前我在模态的挂载钩子中调用 fetch 函数.因此，在这种情况下，当父组件安装模态时会发生获取.这没有意义，因为它应该只(并且每次)在模式打开时获取.
我认为解决这个问题的最好方法是当我单击添加"(打开模态)按钮时动态安装模态组件，但我找不到如何实现这一点.这也避免了许多可能不被使用的组件安装在后台.
截图
示例代码
概述:
<div>//挂载我的模态组件<示例模态:toggleConstant = modalToggleUuid:submitHandler = submitHandler/>//概览组件 HTML 在这里</模板><脚本>导出默认{数据() {返回 {modalToggleUuid: someUuid,someList: [],}},安装(){},方法: {显示模式:函数(){EventBus.$emit(this.modalToggleUuid);},提交处理程序:功能(项目){this.someList.push(item);}}}
模态:
<div><input v-model="item.type"><input v-model="item.name"><input v-model="item.location"></模板><脚本>导出默认{数据() {返回 {modalToggleUuid: someUuid,物品: {}，}},安装(){//在某些情况下，我在这里取东西.每次打开模态时都应该获取数据},方法: {显示模式:函数(){EventBus.$emit(this.modalToggleUuid);},提交处理程序:功能(项目){this.someList.push(item);}}}
问题
处理上述情况的最佳做法是什么?
- 我应该动态挂载模态组件吗?
- 我是否正确安装了组件?我应该一直重置内容吗?
您走在正确的道路上，为了实现您想要的，您可以使用 v-if 解决方案来解决这个问题，例如this - then mounted() 钩子将在您每次切换模式时运行，并且当您不使用它时它也不会出现在 DOM 中.
<div>//挂载我的模态组件<示例模态v-if="isShowModal":toggleConstant="modalToggleUuid":submitHandler="submitHandler"/>//概览组件 HTML 在这里</模板><脚本>导出默认{数据() {返回 {isShowModal: 假，modalToggleUuid: someUuid,一些列表:[]};},安装(){}，方法: {显示模式:函数(){this.isShowModal = true;},提交处理程序:功能(项目){this.someList.push(item);this.isShowModal = false;}}};
Scenario / context
I have an overview component which contains a table and an add button. The add button opens a modal component. When i fill in some text fields in the modal and click the save button, a callback (given as prop) is called so the parent component (the overview) is updated. The save button also triggers the model toggle function so the model closes.
So far works everything like expected but when i want to add a second entry, the modal is "pre-filled" with the data of the recently added item.
Its clear to me that this happens because the model component keeps mounted in the background (so its just hidden). I could solve this by "reset" the modals data when the toggle function is triggered but i think there should be a better way.
I have a similar issue when i want to fetch data in a modal. Currently i call the fetch function in the mounted hook of the modal. So in this case the fetch happens when the parent component mounts the modal. This does not make sense as it should only (and each time) fetch when the modal is opened.
I think the nicest way to solve this is to mount the modal component dynamically when i click the "add" (open modal) button but i can't find how i can achieve this. This also avoids that a lot of components are mounted in the background which are possibly not used.
Screenshot
Example code
Overview:
<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>
Modal:
<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>
Question
What is the best practive to deal with the above described scenario?
- Should i mount the modal component dynamically?
- Do i mount the component correctly and should i reset the content all the time?
You are on the right way and in order to achieve what you want, you can approach this issue with v-if solution like this - then mounted() hook will run every time when you toggle modal and it also will not be present in DOM when you are not using it.
<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>
这篇关于如何使用 props 动态挂载 vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
