How does the child component of vue modify the value of the parent component?

data（）{
    return{
        dialogCreate:'false'
    }
}

import Form from './userCreate'

<template>
    <app-form></app-form>
</template>
<script>
    export default{
        name:'user',
        components:{
            "app-form":Form
        },
        data（）{
            return{
                dialogCreate:'false'
            }
        }
    }
</script>

<app-form v-bind:dialogCreate = "dialogCreate" ></app-form>

1.Accept first
export default{
    props:['dialogCreate']
}
2.You can use it directly in the subcomponent
<p>{{dialogCreate}}</p>

this.$emit('success',false);

<app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>
methods: {
     check(){
         alert(1);
     },
     success(res){
         = res;
     }
}

<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> sheet</el-breadcrumb-item>
                <el-breadcrumb-item>基础sheet</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-row :gutter="22">
                <el-col :span="6">
                    <label>Login name：</label>
                    <el-input v-model="userName" placeholder="Login name" class="handle-input mr10"></el-input>
                </el-col>
                <el-col :span="6">
                    <label>Name：</label>
                    <el-input v-model="realName" placeholder="Name" class="handle-input mr10"></el-input>
                </el-col>
                <el-col :span="10">
                    <label>Operation time：</label>
                    <!-- <div class="block"> -->
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="to"
                            start-placeholder="start date"
                            end-placeholder="End Date">
                        </el-date-picker>
                    <!-- </div> -->
                </el-col>
            </el-row>
           <el-row :gutter="20" style="margin-top:10px">
                <el-col :span="6">
                    <label>state：</label>
                    <el-select v-model="isClose" placeholder="Match Status" class="handle-select mr10">
                        <el-option key="" label="Please select" value=""></el-option>
                        <el-option key="1" label="efficient" value="0"></el-option>
                        <el-option key="2" label="invalid" value="1"></el-option>
                    </el-select>
                </el-col>
                <el-button type="primary" icon="search" @click="search">search</el-button>
                <el-button type="success" icon="plus" @click="handleCreate">create</el-button>
           </el-row>
        </div>
        <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <!-- <el-table-column prop="date" label="Serial Number" sortable>
            </el-table-column> -->
            <el-table-column label="Serial Number"
              type="index"
              :index="indexMethod" width="60px">
            </el-table-column>
            <el-table-column prop="userName" label="Login name" >
            </el-table-column>
            <el-table-column prop="realName" label="Name" >
            </el-table-column>
            <el-table-column prop="isClose" label="state" :formatter="states">
            </el-table-column>
            <el-table-column prop="roleName" label="Role Name" width="120px">
            </el-table-column>
            <el-table-column prop="sex" label="gender" :formatter="sex">
            </el-table-column>
            <el-table-column prop="mobile" label="Mobile phone" width="120px">
            </el-table-column>
            <el-table-column prop="email" label="Email" width="120px">
            </el-table-column>
            <el-table-column prop="ts" label="Operation time" width="120px">
            </el-table-column>
            <el-table-column label="operate" width="180">
                <template scope="scope">
                   <!--  <el-button size="small"
                            @click="handleEdit(scope.$index, )">edit</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, )">delete</el-button> -->
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        operate<i class="el-icon-caret-bottom el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-button type="text" class="dropbtn"  @click="handleEdit(scope.$index, )">
                          Check
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          edit
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          delete
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          invalid
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          Reset password
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          Assign roles
                        </el-button>
                      </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change ="handleCurrentChange"
                    :current-page="cur_page"
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 15, 30]"
                    layout="total,sizes,prev, pager, next,jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!-- Check弹出框 -->
        <el-dialog
            title="Check"
            :="dialogVisible"
            width="10%"
            :before-close="handleClose">
            <div class="form-inline">
                <span>  Login name：</span>
                <label >{{signName}}</label>
            </div>
            <div class="form-inline">
                <span>    Name：</span>
                <label >{{name}}</label>
            </div>
            <div class="form-inline">
                <span>    gender：</span>
                <label >{{sexUser}}</label>
            </div>
            <div class="form-inline">
                <span>Mobile phone：</span>
                <label >{{mobile}}</label>
            </div>
            <div class="form-inline">
                <span>Email：</span>
                <label >{{email}}</label>
            </div>
            <div class="form-inline">
                <span>    state：</span>
                <label class="green" >{{isClose}}</label>
            </div>
            <div class="form-inline">
                <span>  Terminal number：</span>
                <label class="" >{{remark}}</label>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Pick remove</el-button>
                <el-button type="primary" @click="dialogVisible = false">Confirm Certainly</el-button>
            </span>
        </el-dialog>
        <!-- create弹出框 -->
        <el-dialog
            title="hint"
            :="dialogCreate"
            width="30%"
            :before-close="handleClose">
                <app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>
        </el-dialog>
    </div>
</template>
<script>
import Form from './userCreate'
    export default {
        name:'user',
        components:{
            "app-form":Form
        },
        data() {
            return {
                url: './static/',
                userName:'',
                realName:'',
                reservation:'',
                isClose:'',
                tableData: [],
                dataObj:{},
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                value1: ['',''],
                total:100,
                pageSize:10,
                dialogVisible:false,
                dialogCreate:false,
                signName:'123',
                name:'123',
                sexUser:'',
                mobile:'',
                email:'',
                isClose:'',
                remark:''
            }
        },
        created(){
            ();
        },
        computed: {
            data(){
                const self = this;
                return (function(d){
                    let is_del = false;
                    for (let i = 0; i < self.del_list.length; i++) {
                        if( === self.del_list[i].name){
                            is_del = true;
                            break;
                        }
                    }
                    return d;
                })
            }
        },
        methods: {
            check(){
                alert(1);
            },
            success(res){
                 = res;
            },
            handleCurrentChange(val){
                this.cur_page = val;
                (val,);
            },
            handleSizeChange(val){
                 = val;
                (,val);
            },
            getData(num,pageSize){
                let self = this;
                const params = new URLSearchParams();
                var startTime = self.value1[0];
                var endTime = self.value1[1];
                if(startTime == ''){
                    startTime = '';
                }else{
                    startTime = (startTime);
                }
                if(endTime == ''){
                    endTime = ''
                }else{
                    endTime = (endTime);
                }
                 = {
                    userName:,
                    realName:,
                    isClose:,
                    beginDate:startTime,
                    endDate:endTime
                }
                if(!num){
                    num = 1
                }
                if(!pageSize){
                    pageSize = 10
                }
                let data = (,num,pageSize);
                ('param',data);
                if(.NODE_ENV === 'development'){
                     = '/s1/copUser/getUserList';
                };
                self.$(, params).then((res) => {
                     = ;
                     = ;
                })
            },
            indexMethod(index) {
                return index + 1;
            },
            states(row,column){
                if( == '0'){
                    return 'efficient'
                }else{
                    return 'invalid'
                }
            },
            sex(row){
                if( == '0'){
                    return 'male'
                }else{
                    return 'female'
                }
            },
            search(){
                this.is_search = true;
                ();
            },
            formatter(row, column) {
                return ;
            },
            filterTag(value, row) {
                return  === value;
            },
            handleEdit(index, row) {debugger
                 = true;
                 = ;
                 = ;
                if( == 0){
                     = 'male';
                }else{
                     = 'female';
                }
                if( == 0){
                     = 'efficient'
                }else{
                     = 'invalid'
                }
                 = ;
                 = ;
                 = ;
                // this.$message('Edit the '+(index+1)+' line');            },
            handleCreate(){
                 = true;
                debugger
            },
            handleDelete(index, row) {
                this.$('Delete the Chapter'+(index+1)+'OK');
            },
            delAll(){
                const self = this,
                    length = ;
                let str = '';
                self.del_list = self.del_list.concat();
                for (let i = 0; i < length; i++) {
                    str += [i].name + ' ';
                }
                self.$('Deleted'+str);
                 = [];
            },
            handleSelectionChange(val) {
                 = val;
            },
            // Close the dialog box            handleClose(done) {
                this.$confirm('Confirm to close?  ')
                  .then(_ => {
                    done();
                  })
                  .catch(_ => {});
              }
        }
    }
</script>
<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 150px;
    display: inline-block;
}
.el-dropdown-link{
    color: #22A4E5!important;
    cursor: pointer;
}
.dropbtn{
    width: 100px;
    display: block;
    margin-left: 0px!important;
}
.el-dialog--small{
    width: 20%!important;
}
</style>

<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="Login name" prop="userName">
    <p>{{dialogCreate}}</p>
    <el-input v-model="" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="Name" prop="realName">
    <el-input v-model="" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="gender" prop="sex">
    <el-radio-group v-model="">
      <el-radio label="male" value="0"></el-radio>
      <el-radio label="female" value="1"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="Mobile phone" prop="mobile">
    <el-input v-model="" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="Email" prop="email">
    <el-input v-model="" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="state" prop="valid">
    <el-radio-group v-model="">
      <el-radio label="efficient"></el-radio>
      <el-radio label="invalid"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="User Terminal Number" prop="remark">
    <el-input v-model="" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">Create now</el-button>
    <el-button @click="resetForm('ruleForm')">Reset</el-button>
  </el-form-item>
</el-form>
</template>
<script>
// import Vue from 'vue';
// import Router from 'vue-router';
    let Base64 = require('js-base64').Base64;
  export default {
    props:['dialogCreate'],
    data() {
      return {
        ruleForm: {
          userName: '',
          realName:'',
          mobile:'',
          email:'',
          remark:'',
        },
        sex:'',
        valid:'',
        url:'/s1/copUser/addUser',
        dataObj:{},
        rules: {
          userName: [
            { required: true, message: 'Please enter the login name', trigger: 'blur' },
            { min: 3, max: 5, message: 'Length between 3 and 5 characters', trigger: 'blur' }
          ],
          realName: [
            { required: true, message: 'Please enter your name', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: 'Please choose gender', trigger: 'change' }
          ],
          mobile: [
            { required: true, message: 'Please enter the mobile phone', trigger: 'blur' }
          ],
          email: [
            { required: true, message: 'Please enter your email', trigger: 'blur' }
          ],
          valid: [
            { required: true, message: 'Please select status', trigger: 'change' }
          ],
          remark: [
            { required: true, message: 'Please fill in the user terminal number', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {debugger
        let self = this;
        (self);
        const params = new URLSearchParams();
        let sex1 = '',isClose1 = '';
        if( == 'male'){
            sex1 = 0;
        }else{
            sex1 = 1;
        }
        if( = 'efficient'){
            isClose1 = '1';
        }else{
            isClose1 = '0';
        }
        let psw = ('123456');
         = {
            "userName":,
            "realName":,
            "sex":sex1,
            "passWord":psw,
            "mobile":,
            "email":,
            "remark":,
            "isClose":
        }
        let data = ();
        (data);
        ('param',data);
        if(.NODE_ENV === 'development'){
                 = '/s1/copUser/addUser';
            };
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.$(, params).then((res) => {
                if( == '0000'){
                    this.$emit('success',false);
                    this.$({
                          message: 
                        });
                }else{
                    this.$();
                }
                });
            alert('submit!');
          } else {
            ('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      vaildInput(elem){
        (this.$);
      }
    }
  }
</script>