父组件控制子组件中dialog对话框的方法

首先注册,导入,并使用对话框的子组件,并绑定一个布尔值 <new-page v-if="isShow" @close="close" ref="ref"></new-page>

注意上面的布尔值是控制对话框这个子组件的显示与隐藏的

再在子组件对话框中也绑定一个布尔值 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>哇哈哈哇哈哈</span> <div>咿呀咿呀呦</div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="tbn">确 定</el-button> </span> </el-dialog>

这里的是控制对话框自身的显示和隐藏的.

然后在子组件自定义一个方法来控制对话框的显示:

methods: { openDia() { this.dialogVisible = true; }, },

然后在父组件需要的时候打开对话框:

openDialog() { this.isShow = true; this.$nextTick(() => { this.$refs.ref.openDia(); }); },

然后在点击确定发完请求后给父组件传递一个事件告诉它可以关闭对话框了

methods: { doneBtn() { this.$emit("close"); } },

3.最后一步就是在父组件监听来自子组件传递的关闭事件,关掉这个对话框

close() { this.isShow = false; }