Vue在一个页面中引入另一个弹窗页面
在 PromotionDialog.vue 文件中,编写 Vue 模板代码,并将放置在其中。同时,将 selectPromotion 方法移动到该组件中,以便在需要时触发对话框的显示。在需要使用对话框的页面中,引入并使用 PromotionDialog 组件,并调用该组件中的 selectPromotion 方法来显示对话框。现在,你可以在一个页面中使用独立的组件来显示弹窗,而不需要跳转到新的页面
·
首先创建一个新的 Vue 组件文件,可以命名为 PromotionDialog.vue(或其他名称)。
在 PromotionDialog.vue 文件中,编写 Vue 模板代码,并将 放置在其中。同时,将 selectPromotion 方法移动到该组件中,以便在需要时触发对话框的显示。
<template>
<div>
<el-dialog
:visible.sync="showPromotion"
style="max-height: 800px; overflow-y: auto;"
:close-on-click-modal="false"
append-to-body
>
<!-- 对话框内容 -->
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
showPromotion: false,
};
},
methods: {
selectPromotion() {
this.showPromotion = true;
},
//选择了内容
select(row){
this.$emit('promotionData', {//另一个页面需要获取的数据
id: row.id,
name: row.infoName
});
this.showPromotion = false; // 关闭弹窗
},
},
};
</script>
<style scoped>
/* 样式 */
</style>
在需要使用对话框的页面中,引入并使用 PromotionDialog 组件,并调用该组件中的 selectPromotion 方法来显示对话框。
<template>
<div>
<!-- 其他组件内容 -->
<el-button type="primary" size="mini" @click="showPromotionDialog">选择</el-button>
<PromotionDialog ref="promotionDialog" @promotionData="handlePromotionId"></PromotionDialog>
</div>
</template>
<script>
import PromotionDialog from '@/components/PromotionDialog.vue';
export default {
components: {
PromotionDialog,
},
methods: {
//调用PromotionDialog.vue里面的selectPromotion方法
showPromotionDialog() {
this.$refs.promotionDialog.selectPromotion();
},
//获取到promotionDialog传过来的id
handlePromotionId(data) {
console.log(data)
this.addFields.promotionId = data.id
this.addFields.promotionName = data.infoName
},
},
};
</script>
<style scoped>
/* 样式 */
</style>
现在,你可以在一个页面中使用独立的组件来显示弹窗,而不需要跳转到新的页面。对话框仍然属于上一个页面,但通过独立的组件实现了逻辑上的分离和复用。
更多推荐
已为社区贡献2条内容
所有评论(0)