父组件:
<template> <el-button type="primary" plain @click="Newlyadded('addOrder')">新增</el-button> <Add ref="addOrder" v-if="addOrderVisible" :visible.sync="addOrderVisible"></Add> </template> <script> import Add from '子文件路径' export default { components:{ 'Add': Add }, data() { return { } methods: { /* ---------------------------------- 新增 ---------------------------------- */ Newlyadded (refForm) { if(this.$refs[refForm]){ this.$refs[refForm].initForm(); } this.addOrderVisible= true; } } } </script> <style lang="scss" scoped> </style>
子组件:
<template> <!------------------------------------ 新增------------------------------------> <el-dialog :visible.sync="visible" :show-close="false" style="margin-top: -100px;" width="75%" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false"> <h2 slot="title">新增</h2> <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button> <div slot="footer" class="buttons-wrap"> <el-button style="width: 150px;height: 58px;border-radius: 0;" @click.stop="cancelModal">关闭窗口</el-button> <el-button type="primary" style="width: 150px;height: 58px;border-radius: 0;">确定新增</el-button> </div> </el-dialog> </template> <script> export default { props: { visible: { type: Boolean, default: false } }, data(){ return { } }, methods: { initForm(){ this.orderForm = { fromContact: '', fromPhone: '' }; if(this.$refs.orderForm){ this.$refs.orderForm.resetFields(); } }, cancelModal(){ // 关闭弹窗,触发父组件修改visible值 this.$emit('update:visible', false); } } } </script> <style lang="scss" scoped> </style>