Vue-子页面调父页面方式

方式有很多，这里介绍一种方式：$emit

子页面代码

<el-button type="primary" @click="emitToParent()" v-if="pageType=='treeApproveReport'" round>返回</el-button>

emitToParent() {
    this.$emit('closeDialog', false);
},

this.$emit(‘closeDialog’, false); 第一个参数：监听的事件名称，第二个参数：要传的值

@:v-on 指令，它用于监听 DOM 事件：

父页面代码

<budgetApproveDetail ref="budgetApproveDetail" @closeDialog="closeTreeDialog" v-if="budgetApproveDetailVisible"> </budgetApproveDetail>

// 功能描述：关闭弹窗 |2021/5/26 10:03
closeTreeDialog(data) {
    console.log(data);
    this.budgetApproveDetailVisible = data;
},

@后跟监听事件的明后才能，必须跟子页面中$emit中的第一个参数名一致
budgetApproveDetail：子组件