vue+elementUI 在父组件中打开子组件对话框Dialog,注意methods要写对
(1)在父组件中引入子组件<template><dialog1 v-if="dialog1Visible" ref="dialog1" ></dialog1></template><script>import dialog1 from "./components/dialog1.vue";export default {data() {r
·
(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>
更多推荐
已为社区贡献1条内容
所有评论(0)