vue+elementUI 在父组件中打开子组件对话框Dialog，注意methods要写对

（1）在父组件中引入子组件

<template> <dialog1 v-if="dialog1Visible" ref="dialog1" ></dialog1> </template> <script> import dialog1 from "./components/dialog1.vue"; export default { data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, dialog1Visible:false, //打开dialog1 } }, components:{ dialog1 },

(2)在父组件中设置子组件的visible可见性 dialog1Visible字段用于设置可见性 openDialog1Visible为子组件中设置可见性的方法

methods: { onSubmit() { console.log('submit!'); }, handleShowDialog(){ this.dialog1Visible=true; this.$nextTick(()=>{ this.$refs.dialog1.openDialog1Visible(); }); }, }

（3）在子组件中设置<el-dialog 的可见性 visible.sync="dialogFormVisible"字段用于设置可见性，dialogFormVisible初始值为false

<template> <el-dialog title="收货地址" :visible.sync="dialogFormVisible" class="taskDialog" :close-on-click-modal="false" :append-to-body="true"> </template> <script> export default { name: "dialog1", data(){ return{ form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, dialogFormVisible:false, formLabelWidth: '120px' } }, methods:{ openDialog1Visible(){ this.dialogFormVisible=true; } } } </script>