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

Posted 2021-02-13 benbenbai

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

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

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

主页面中   

<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>