<!--ParentComponent.vue-->
<template>
<div>
<button @click="showPopupV">点我会有个弹出框!!!</button>
<PopupComponent v-if="showPopup" :data="parentData" @closePopup="closePopup" />
</div>
</template>
<script>
import PopupComponent from "./PopupComponent.vue";
export default {
components: {
PopupComponent,
},
data() {
return {
showPopup: false,
parentData: {
message: "从父组件带来的信息",
value: 66,
reason: '',
},
};
},
methods: {
showPopupV() {
this.showPopup = true;
},
closePopup() {
this.showPopup = false;
},
},
};
</script>
实现效果:
<template>
<div class="popup">
<div class="popup-content">
<h2>填写信息的弹出框</h2>
<label>
<textarea
v-model="localData.reason"
type="textarea"
:rows="4"
style="width: 400px;height: 100px;line-height: 20px"
placeholder="请输入要填写的信息"
maxlength="512"
/>
</label>
<button @click="closePopup">取消</button>
<button @click="confirmPopup">确认</button>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true,
},
},
data() {
// 创建本地副本以供修改
return {
localData: { ...this.data },
};
},
methods: {
closePopup() {
this.$emit("closePopup");
},
confirmPopup() {
console.log('入参:', this.localData);
console.log('入参:', this.localData.message);
console.log('入参:', this.localData.value);
console.log('入参:', this.localData.reason);
},
},
};
</script>
<style scoped>
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.popup-content {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
实现效果(点击父组件的按钮之后)然后点击确定,数据将会输出到控制台,传到接口时直接替换即可: