父组件
<template>
<div class="organ">
<groupModal ref="groupModal" :modalAdd.sync="modal" :modalParams="modalParams" @define="define"></groupModal>
<Button @click="open">打开弹窗</Button>
</div>
</template>
<script>
import groupModal from "./components/groupModal.vue";
export default {
components: {
groupModal
},
data() {
return {
modal: false,
modalParams:{
type: 3,
modalTitle: '',
group_id: ''
},
};
},
created() {
},
methods: {
open(){
this.modal = true
}
},
};
</script>
子组件
<template>
<Modal v-model="modal" :title="modalParams.modalTitle" :mask-closable="false" :closable="false" @on-visible-change="visibleChange">
<div>content</div>
<div slot="footer">
<Button type="text" size="large" @click="cancel">取消</Button>
<Button type="primary" size="large" @click="define('formData')">确定</Button>
</div>
</Modal>
</template>
<script>
export default {
props:{
modalParams: Object,
modal: Boolean
},
data() {
return {
};
},
created() {
},
methods: {
cancel(){
//修改props的modal 并修改父组件传入的modal值 也可以直接在@click 里写 @click="$emit('update:modal', false)"
this.$emit('update:modal', false)
}
},
};
</script>
网友评论