描述
点击父组件《立即购买》按钮,弹窗显示企业列表,点击弹窗的《关闭》按钮关闭弹窗
知识点
计算属性,set,get,父子组件通信,
子组件
<template> <div class="select-en-container"> <el-dialog title="title" :visible.sync="isShow" :show-close="true" :before-close="handleCancel" :close-on-click-modal="false" width="800px" custom-class="getEnterprise-box-dialog" > XXXXXXX <div slot="footer" class="dis-flex flex-justify-end"> <div slot="footer" class="dis-flex flex-justify-end"> <el-button class="dialog-footer-cancel" @click.native="handleCancel">取消</el-button> <button class="dialog-footer-confirmed theme-bg-h-hover" type="primary" v-debounce @click="handleSelectEnterpriseSure" > 确定 </button> </div> </div> </el-dialog> </div> </template> <script> export default { name: 'selectEnterprise', data() { return { } }, props: { itemData: { type: Object, default() { return {}; }, }, isVisibleDialog: { type: Boolean, default() { return false; }, }, from: { type: String, default() { return 'XX'; }, }, title: { type: String, default() { return ''; }, }, }, computed: { isShow: { get(){ return this.isVisibleDialog }, set(v){ this.isVisibleDialog = v; } }, }, watch: { isVisibleDialog(){ if(this.isVisibleDialog){ this.getData(); } } }, methods: { //企业列表 getData() { XXXX }, handleCancel(){ this.$parent.selectEn.isVisibleDialog = false; }, handleSelectEnterpriseSure(){ this.$parsent.selectEn.isVisibleDialog = false; }, }, }; </script>
父组件
<template> <div class="buy-btn" @click="handleBuyDialog">立即购买</div> <div class="father-container"> <select-enterprise title="选择企业" from="buy" :isVisibleDialog="selectEn.isVisibleDialog" :item-data="data" /> </div> </template> <script> export default { name: "", data() { return { selectEn { isVisibleDialog: false, }, data: [] } }, created() { }, mounted() { }, methods: { handleBuyDialog(){ this.selectEn.isVisibleDialog = true; }, }, }; </script>