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

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

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

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

主页面中

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

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