我有一个使用bootstrap vue的Nuxt应用程序。
我有一个可重用的模态组件
components/BaseModal.vue
<template>
<b-modal id="base_modal" :title="title" size="md" @hidden="hide">
<slot name="body"></slot>
<hr>
<BaseButton class="btn" variant="outline-secondary" @click="close" buttonText="Cancel"/>
<slot name="footer"></slot>
</b-modal>
</template>
<script>
export default {
name: 'BaseModal',
props: {
title: { type: String, required: true },
size: { type: String, default: "lg" }
},
methods: {
close() {
this.$root.$emit('bv::hide::modal', 'base_modal');
},
hide() {
// Clear slot body contents here
}
}
};
</script>
我通过使用命名范围呈现 html 元素来调用此组件:
<template>
<BaseButton @click="showModal" buttonText="Show Modal"/>
<BaseModal title="Add Recommendation" size="md">
<div slot="body">
<b-form @submit.prevent="submit" autocomplete="off">
<b-card-body>
<b-row>
<b-col><BaseTextInput v-model.trim="name" label="Headline"/></b-col>
</b-row>
</b-card-body>
</b-form>
</div>
<BaseButton class="float-right btn" variant="outline-primary" @click="submit" buttonText="Save" slot="footer"/>
</BaseModal>
</template>
<script>
export default {
name: 'FormInput',
data() {
return {
name: ""
}
},
methods: {
showModal: {
this.$root.$emit('bv::show::modal','base_modal');
},
submit() {
// dispatch creation
}
}
}
</script>
如何在隐藏时重置/清除模态正文的内容,以便在触发 showModal 时它会再次重新渲染内容?
可以考虑以下解决方案:
选项 1:从模态组件发出事件
- 模式关闭后,在组件中发出
Modal
自定义事件:
Modal.vue
<template>
<b-modal id="base_modal" title="Modal example" @hidden="hide" >
<slot name="body"></slot>
<slot name="footer"></slot>
</b-modal>
</template>
<script>
export default {
name: "BaseModal",
methods: {
hide() {
this.$emit('hide')
}
}
};
</script>
- 然后在父组件中,一旦触发
hide
事件,就可以像这样清除表单值:
App.vue
<template>
<div>
<b-button @click="showModal" ref="btnShow">Open Modal</b-button>
<ModalExample @hide="hideModal">
<div slot="body">
<form @submit.stop.prevent="handleSubmit">
<b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input>
</form>
</div>
</ModalExample>
</div>
</template>
<script>
import ModalExample from "./components/ModalExample.vue";
export default {
components: {
ModalExample
},
data() {
return {
name: ""
};
},
methods: {
showModal() {
this.$root.$emit("bv::show::modal", "base_modal");
},
hideModal() {
this.name = ''; //clear form values
}
}
};
</script>
下面是演示此方法的演示。
选项 2:利用作用域槽
模态组件可以通过作用域槽访问数据:
ModalExample.vue
<template>
<b-modal id="base_modal" title="Modal example" @hidden="hide" >
<slot :formData="formData" name="body"></slot>
<slot name="footer"></slot>
</b-modal>
</template>
<script>
export default {
name: "ModalExample",
data() {
return {
formData : {}
}
},
methods: {
hide() {
//clear form fields
for (const name of Object.keys(this.formData)) {
this.formData[name] = ""
}
}
}
};
</script>
App.vue
<template>
<div>
<b-button @click="showModal" ref="btnShow">Open Modal</b-button>
<ModalExample @hide="hideModal">
<template slot="body" slot-scope="{formData}">
<form @submit.stop.prevent="handleSubmit">
<b-form-input
type="text"
placeholder="Enter your first name"
v-model="formData.firstname"
></b-form-input>
<b-form-input
type="text"
placeholder="Enter your last name"
v-model="formData.lastname"
></b-form-input>
</form>
</template>
</ModalExample>
</div>
</template>
<script>
import ModalExample from "./components/ModalExample.vue";
export default {
components: {
ModalExample
},
data() {
return {
};
},
methods: {
showModal() {
this.$root.$emit("bv::show::modal", "base_modal");
}
}
};
</script>