Vue+Element下弹出框选择值后返回值的实现

一、测试环境：

1.VUE

2.Element

二、功能描述：

弹出选择框，选择一条记录，点击确定，把记录的值返回到页面

三、关键代码：

1.父页面：

<template>
<el-button icon="el-icon-add" size="small" type="primary" @click="openDialog">选择</el-button>
<el-dialog title="选择" :visible.sync="dialogVisible" v-if="dialogVisible" center append-to-body>
<Mydialog @close="closeDialog"></Mydialog>
</el-dialog>
</template>
<script>
import Mydialog from './mydialog'
export default{
     methods:{
        openDialog(){
           this.dialogVisible=true;  
        },
        closeDialog(model){
           console.info("选择的结果是:",model);
           this.dialogVisible=false;
        }
     },
     components:{
        Mydialog
     },
     data(){
        return {
          dialogVisible:false
        }
     }
}
</script>

2.弹出框页面：

<template>
    <el-button type="primary" size="small" @click="closeDialog">取消</el-button>
    <el-button type="primary" size="small" @click="saveDialog">保存</el-button>
</template>
<script>
    export default{
       methods:{
          closeDialog(entity){
             this.$emit('close',entity);
          },
          saveDialog(){
             this.closeDialog(this.model);
          }
       },
       data(){
         return {
            model:{
              id:'',
              name:''
            }
         }
       }
    }
</script>

 

(全文完)