ElementUIDialog对话框,vue组件之间传值
发布网友
发布时间：2024-09-30 16:43
共1个回答
热心网友
时间：2024-10-07 17:16
在编辑、添加等操作时都用到Dialog对话框，不想全部写在一个组件中，就想重新写个Dialog组件，复用，把Dialog作为子组件，这里涉及到父子组件之间的传值。
二、自定义内容Dialog组件的内容可以是任意的，甚至可以是表格或表单，这里应用了Element中Table和Form组件的两个样例。
<el-buttontype="text"@click="dialogTableVisible=true">打开嵌套表格的Dialog</el-button><el-dialogtitle="收货地址":visible.sync="dialogTableVisible"><el-table:data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-columnproperty="address"label="地址"></el-table-column></el-table></el-dialog><el-buttontype="text"@click="dialogFormVisible=true">打开嵌套表单的Dialog</el-button><el-dialogtitle="收货地址":visible.sync="dialogFormVisible"><el-form:model="form"><el-form-itemlabel="活动名称":label-width="formLabelWidth"><el-inputv-model="form.name"autocomplete="off"></el-input></el-form-item><el-form-itemlabel="活动区域":label-width="formLabelWidth"><el-selectv-model="form.region"placeholder="请选择活动区域"><el-optionlabel="区域一"value="shanghai"></el-option><el-optionlabel="区域二"value="beijing"></el-option></el-select></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-button@click="dialogFormVisible=false">取消</el-button><el-buttontype="primary"@click="dialogFormVisible=false">确定</el-button></div></el-dialog><script>exportdefault{data(){return{gridData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1518弄'}],dialogTableVisible:false,dialogFormVisible:false,form:{name:'',region:'',date1:'',date2:'',delivery:false,type:[],resource:'',desc:''},formLabelWidth:'120px'};}};</script>ViewCode点击打开嵌套表单的Dialog，效果如下：
三、组件之间传值在实际开发过程中，对于Dialog对话框，会单独创建一个vue文件，进行处理。这样的话，维护页面比较方便。而不是在一个总的vue文件，涉及几千行代码。
下面使用一个小demo，结合Dialog对话框，演示组件之间传值。
目标：
父组件HelloWorld.vue，点击添加按钮，调用子组件Goods.vue，
弹出Dialog对话框。输入表单数据
表单数据回传给父组件HelloWorld.vue
新建一个ElementUI项目，修改文件HelloWorld.vue，完整内容如下：
<template><divclass="hello"><el-row><el-buttontype="primary"@click='add()'>添加</el-button></el-row>//使用子组件<Goodsref="gds"@children="parentGoods"/></div></template><script>importGoodsfrom"./Goods";exportdefault{name:'HelloWorld',//注册组件components:{Goods},methods:{add(){//弹出对话框this.$refs.gds.showDialog()},//子组件传值给父组件-货物parentGoods(obj){//打印子组件传递的值console.log("parentGoods",obj)}}}</script><stylescoped></style>在HelloWorld.vue同级目录下，新建文件Goods.vue
<template><el-dialogtitle="添加货物":visible.sync="dialogFormVisible"width="500px"><el-form:model="form"><el-form-itemlabel="货物名称":label-width="formLabelWidth"><el-inputv-model="form.name"autocomplete="off"style="width:218px"></el-input></el-form-item><el-form-itemlabel="货物产地":label-width="formLabelWidth"><el-selectv-model="form.region"placeholder="请选择活动区域"><el-optionlabel="上海"value="shanghai"></el-option><el-optionlabel="北京"value="beijing"></el-option></el-select></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-button@click="dialogFormVisible=false">取消</el-button><el-buttontype="primary"@click="setGoods()">确定</el-button></div></el-dialog></template><script>exportdefault{name:"Goods",data(){return{dialogFormVisible:false,form:{name:'',region:'',},formLabelWidth:'120px'}},methods:{showDialog(){this.dialogFormVisible=true},setGoods(){//$emit触发当前实例上的事件//触发父组件的children事件，将this.form回传过去this.$emit('children',this.form)//关闭对话框this.dialogFormVisible=false}}}</script><stylescoped></style>vm.$emit(eventName,[…args])]----触发当前实例上的事件。附加参数都会传给监听器回调。
