基于elementUI,VUE弹出窗口的实现，以及父子页面数据的传输

父页面

父页面的弹出框准备好，可以看到我这个父页面有三个弹出框口

<!-- DIALOG Add Button Popup Windows Start DIALOG-->

<el-dialog title="宛先を追加" :visible.sync="addDialog" v-if="addDialog" width="40%">

<companyAddDialog :companyAdd="companyPersonAdd" @dialogVisibleAdd="dialogVisibleAdd"></companyAddDialog>

</el-dialog>

<!-- DIALOG Add Button Popup Windows End DIALOG-->

<!-- Dialog 宛先をまとめて追加 Button show windows start Dialog-->

<el-dialog title="宛先を追加" :visible.sync="batchAddDialog" v-if="batchAddDialog">

<companBatchAdd :companyBatchAdd="companysBatchAdd" @batchAddCompany="batchAddCompany"></companBatchAdd>

</el-dialog>

<!-- Dialog 宛先をまとめて追加 Button show windows end Dialog-->

<!-- Dialog 編集する Button show windows start Dialog-->

<el-dialog title="宛先を追加" :visible.sync="editorDialog" v-if="editorDialog">

<companyEditDialog :companyEditDialog="editDialog" @editClick="editClick"></companyEditDialog>

</el-dialog>

<!-- Dialog 編集する Button show windows end Dialog-->

参考建议：addDialog等变量值可以在data中赋予初始化，用于是否显示这个dialog的，v-if用于每次新弹开这个窗口重新初始化，否则打开后上次输入的内容还会显示。

注意：companyPersonAdd等变量值记得要在data中赋值，这个值是用来给子页面传递数据用的。给子页面传递数据。

@dialogVisibleAdd等方法名是用来接收子页面返回数据的回调方法。

JavaScript中引入三个要跳转的子页面。components引入子组件，用逗号分隔。注意：自定义模板的命名要与import的命名和compoents名字一致。

import companyAddDialog from './S05_Contarct_Start_Children/S05_Contract_Start_Add'

import companBatchAdd from './S05_Contarct_Start_Children/S05_Contract_Start_BatchAdd'

import companyEditDialog from './S05_Contarct_Start_Children/S05_Contract_Start_Edit'

子页面

页面部分正常画就可以

注意：props为父页面的自定义模板得属性名，看上面父页面的代码，:companyAdd="companyPersonAdd"

子页面要想接收父页面传递的值，要写created方法，图片中this.companyPersonAdd是子页面data中定义的值，与父页面没有关系。，子页面给父页面传值用$emit()如上图，第一个参数为父页面定义的@dialogVisibleAdd事件。