码迷,mamicode.com
首页 > 其他好文 > 详细

点击按钮加载子组件中的弹框

时间:2019-03-15 14:31:27      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:页面   text   label   pre   new   class   contain   logs   size   

项目中有好多弹框,一开始让他们公用一个弹框,弹框中再加载不同的子组件,并不好用,下面的提交按钮得写好多判断。

页面有点乱。想着直接各个页面中直接弹框,后续再把各种按钮提交的值传给父组件。。。。。。

父子传值搞的脑袋有点短路,要消化吸收要不断学习。

主页面中   

<template>
<div class="app-container">
<el-button @click="handleClick" type="text" size="small">查看</el-button>
<children @CB_dialogStatus="CB_dialogStatus" :dialogStatus="dialogStatus"></children>
</div>
</template>
<script>
import children from ‘./test/child.vue‘
export default {
data() {
return {
dialogStatus: false,
};
},
methods:{
handleClick () {
this.dialogStatus = true;
},
CB_dialogStatus () {
this.dialogStatus = false;
}
},
components:{
children
}
};
</script>

子组件中
<template>
<el-dialog title="收货地址" :visible.sync="dialogFormViseble" @close="closeDialog">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormViseble = false">取 消</el-button>
<el-button type="primary" @click="dialogFormViseble = false">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: [‘dialogStatus‘],
/* props: {dialogStatus:Boolean} ,*/

data () {
return {
gridData: [{
date: ‘2016-05-02‘,
name: ‘王小虎‘,
address: ‘上海市普陀区金沙江路 1518 弄‘
}],
dialogFormViseble:false,
}
},
methods: {
closeDialog () {
this.$emit(‘CB_dialogStatus‘)
}
},
watch:{
dialogStatus(newLv,oldLv){
this.dialogFormViseble=newLv
}
}
}
</script>
 

点击按钮加载子组件中的弹框

标签:页面   text   label   pre   new   class   contain   logs   size   

原文地址:https://www.cnblogs.com/benbenbai/p/10536624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!