vue—子组件修改父组件的值

如何在子组件中修改父组件的值

第一步：首先得保证父组件中有值吧

这是userManage.vue

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

• 1
• 2
• 3
• 4
• 5

第二步：在父组件中引用子组件

import Form from ‘./userCreate‘

• 1

第三步：父组件中注册子组件并引用

<template>
    <app-form></app-form>
</template>

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

第四步：把父组件的值绑定给子组件上

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

• 1

第五步：既然父组件把值给了子组件了，子组件得接受和用吧

子组件

1.先接受
export default{
    props:[‘dialogCreate‘]
}
2.就可以直接在自组建中用了
<p>{{dialogCreate}}</p>

• 1
• 2
• 3
• 4
• 5
• 6

第六步：向父组件发射一个方法

比如我们在后台数据接收成功时，告诉父组件已经成功

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

• 1

第七步：父组件接收到这个方法并且执行改变父组件的值

<app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>

methods: {
     check(){
         alert(1);
     },
     success(res){
        this.dialogCreate = res;
     }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

最后，贴上源码

父组件

<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
                <el-breadcrumb-item>基础表格</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-row :gutter="22">
                <el-col :span="6">
                    <label>登录名：</label>
                    <el-input v-model="userName" placeholder="登录名" class="handle-input mr10"></el-input>
                </el-col>
                <el-col :span="6">
                    <label>姓名：</label>
                    <el-input v-model="realName" placeholder="姓名" class="handle-input mr10"></el-input>
                </el-col>
                <el-col :span="10">
                    <label>操作时间：</label>
                    <!-- <div class="block"> -->
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    <!-- </div> -->
                </el-col>

            </el-row>
           <el-row :gutter="20" style="margin-top:10px">
                <el-col :span="6">
                    <label>状态：</label>
                    <el-select v-model="isClose" placeholder="匹配状态" class="handle-select mr10">
                        <el-option key="" label="请选择" value=""></el-option>
                        <el-option key="1" label="有效" value="0"></el-option>
                        <el-option key="2" label="无效" value="1"></el-option>
                    </el-select>
                </el-col>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="success" icon="plus" @click="handleCreate">创建</el-button>
           </el-row>
        </div>


        <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">

            <!-- <el-table-column prop="date" label="序号" sortable>
            </el-table-column> -->
            <el-table-column label="序号"
              type="index"
              :index="indexMethod" width="60px">
            </el-table-column>
            <el-table-column prop="userName" label="登录名" >
            </el-table-column>
            <el-table-column prop="realName" label="姓名" >
            </el-table-column>
            <el-table-column prop="isClose" label="状态" :formatter="states">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="120px">
            </el-table-column>
            <el-table-column prop="sex" label="性别" :formatter="sex">
            </el-table-column>
            <el-table-column prop="mobile" label="移动电话" width="120px">
            </el-table-column>
            <el-table-column prop="email" label="电子邮箱" width="120px">
            </el-table-column>
            <el-table-column prop="ts" label="操作时间" width="120px">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                   <!--  <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        操作<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, scope.row)">
                          查看
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          编辑
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          删除
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          无效
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          重置密码
                        </el-button>
                        <el-button type="text" class="dropbtn">
                          分配角色
                        </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>



        <!-- 查看弹出框 -->
        <el-dialog
            title="查看"
            :visible.sync="dialogVisible"
            width="10%"
            :before-close="handleClose">
            <div class="form-inline">
                <span>&ensp;&ensp;登录名：</span>
                <label id="userNameCheck">{{signName}}</label>
            </div>
            <div class="form-inline">
                <span>&ensp;&ensp;&ensp;&ensp;姓名：</span>
                <label id="realNameCheck">{{name}}</label>
            </div>
            <div class="form-inline">
                <span>&ensp;&ensp;&ensp;&ensp;性别：</span>
                <label id="sexCheck">{{sexUser}}</label>
            </div>
            <div class="form-inline">
                <span>移动电话：</span>
                <label id="mobileCheck">{{mobile}}</label>
            </div>
            <div class="form-inline">
                <span>电子邮箱：</span>
                <label id="emailCheck">{{email}}</label>
            </div>
            <div class="form-inline">
                <span>&ensp;&ensp;&ensp;&ensp;状态：</span>
                <label class="green" id="isCloseCheck">{{isClose}}</label>
            </div>
            <div class="form-inline">
                <span>&ensp;&ensp;终端号：</span>
                <label class="" id="terminalNo">{{remark}}</label>
            </div>


            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 创建弹出框 -->
        <el-dialog
            title="提示"
            :visible.sync="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/vuetable.json‘,
                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(){
            this.getData();
        },
        computed: {
            data(){
                const self = this;
                return self.tableData.filter(function(d){
                    let is_del = false;
                    for (let i = 0; i < self.del_list.length; i++) {
                        if(d.name === self.del_list[i].name){
                            is_del = true;
                            break;
                        }
                    }
                    return d;
                })
            }
        },
        methods: {
            check(){
                alert(1);
            },
            success(res){
                this.dialogCreate = res;
            },
            handleCurrentChange(val){
                this.cur_page = val;
                this.getData(val,this.pageSize);
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.getData(this.currentPage,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 = self.getTime(startTime);
                }
                if(endTime == ‘‘){
                    endTime = ‘‘
                }else{
                    endTime = self.getTime(endTime);
                }

                self.dataObj = {
                    userName:self.userName,
                    realName:self.realName,
                    isClose:self.isClose,
                    beginDate:startTime,
                    endDate:endTime
                }
                if(!num){
                    num = 1
                }
                if(!pageSize){
                    pageSize = 10
                }
                let data = self.param(self.dataObj,num,pageSize);
                params.append(‘param‘,data);
                if(process.env.NODE_ENV === ‘development‘){
                    self.url = ‘/s1/copUser/getUserList‘;
                };
                self.$axios.post(self.url, params).then((res) => {
                    self.tableData = res.data.data.list;
                    self.total = res.data.total;
                })
            },
            indexMethod(index) {
                return index + 1;
            },
            states(row,column){
                if(row.isClose == ‘0‘){
                    return ‘有效‘
                }else{
                    return ‘无效‘
                }
            },
            sex(row){
                if(row.sex == ‘0‘){
                    return ‘男‘
                }else{
                    return ‘女‘
                }
            },
            search(){
                this.is_search = true;
                this.getData();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {debugger
                this.dialogVisible = true;
                this.signName = row.userName;
                this.name = row.realName;
                if(row.sex == 0){
                    this.sexUser = ‘男‘;
                }else{
                    this.sexUser = ‘女‘;
                }
                if(row.isClose == 0){
                    this.isClose = ‘有效‘
                }else{
                    this.isClose = ‘无效‘
                }
                this.mobile = row.mobile;
                this.email = row.email;
                this.remark = row.remark;

                // this.$message(‘编辑第‘+(index+1)+‘行‘);
            },
            handleCreate(){
                this.dialogCreate = true;
                debugger
            },
            handleDelete(index, row) {
                this.$message.error(‘删除第‘+(index+1)+‘行‘);
            },
            delAll(){
                const self = this,
                    length = self.multipleSelection.length;
                let str = ‘‘;
                self.del_list = self.del_list.concat(self.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += self.multipleSelection[i].name + ‘ ‘;
                }
                self.$message.error(‘删除了‘+str);
                self.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 关闭对话框
            handleClose(done) {
                this.$confirm(‘确认关闭？‘)
                  .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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168
• 169
• 170
• 171
• 172
• 173
• 174
• 175
• 176
• 177
• 178
• 179
• 180
• 181
• 182
• 183
• 184
• 185
• 186
• 187
• 188
• 189
• 190
• 191
• 192
• 193
• 194
• 195
• 196
• 197
• 198
• 199
• 200
• 201
• 202
• 203
• 204
• 205
• 206
• 207
• 208
• 209
• 210
• 211
• 212
• 213
• 214
• 215
• 216
• 217
• 218
• 219
• 220
• 221
• 222
• 223
• 224
• 225
• 226
• 227
• 228
• 229
• 230
• 231
• 232
• 233
• 234
• 235
• 236
• 237
• 238
• 239
• 240
• 241
• 242
• 243
• 244
• 245
• 246
• 247
• 248
• 249
• 250
• 251
• 252
• 253
• 254
• 255
• 256
• 257
• 258
• 259
• 260
• 261
• 262
• 263
• 264
• 265
• 266
• 267
• 268
• 269
• 270
• 271
• 272
• 273
• 274
• 275
• 276
• 277
• 278
• 279
• 280
• 281
• 282
• 283
• 284
• 285
• 286
• 287
• 288
• 289
• 290
• 291
• 292
• 293
• 294
• 295
• 296
• 297
• 298
• 299
• 300
• 301
• 302
• 303
• 304
• 305
• 306
• 307
• 308
• 309
• 310
• 311
• 312
• 313
• 314
• 315
• 316
• 317
• 318
• 319
• 320
• 321
• 322
• 323
• 324
• 325
• 326
• 327
• 328
• 329
• 330
• 331
• 332
• 333
• 334
• 335
• 336
• 337
• 338
• 339
• 340
• 341
• 342
• 343
• 344
• 345
• 346
• 347
• 348
• 349
• 350
• 351
• 352
• 353
• 354
• 355
• 356
• 357
• 358
• 359
• 360
• 361
• 362
• 363
• 364
• 365
• 366
• 367
• 368
• 369
• 370
• 371
• 372
• 373
• 374
• 375
• 376
• 377
• 378
• 379
• 380
• 381
• 382
• 383
• 384
• 385
• 386

子组件

<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="登录名" prop="userName">
    <p>{{dialogCreate}}</p>
    <el-input v-model="ruleForm.userName" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="姓名" prop="realName">
    <el-input v-model="ruleForm.realName" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="性别" prop="sex">
    <el-radio-group v-model="ruleForm.sex">
      <el-radio label="男" value="0"></el-radio>
      <el-radio label="女" value="1"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="移动电话" prop="mobile">
    <el-input v-model="ruleForm.mobile" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="电子邮箱" prop="email">
    <el-input v-model="ruleForm.email" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>
  <el-form-item label="状态" prop="valid">
    <el-radio-group v-model="ruleForm.valid">
      <el-radio label="有效"></el-radio>
      <el-radio label="无效"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="用户终端号" prop="remark">
    <el-input v-model="ruleForm.remark" v-on:change="vaildInput(this)"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm(‘ruleForm‘)">立即创建</el-button>
    <el-button @click="resetForm(‘ruleForm‘)">重置</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: ‘请输入登录名‘, trigger: ‘blur‘ },
            { min: 3, max: 5, message: ‘长度在 3 到 5 个字符‘, trigger: ‘blur‘ }
          ],
          realName: [
            { required: true, message: ‘请输入姓名‘, trigger: ‘blur‘ }
          ],
          sex: [
            { required: true, message: ‘请选择性别‘, trigger: ‘change‘ }
          ],
          mobile: [
            { required: true, message: ‘请输入移动电话‘, trigger: ‘blur‘ }
          ],
          email: [
            { required: true, message: ‘请输入电子邮箱‘, trigger: ‘blur‘ }
          ],
          valid: [
            { required: true, message: ‘请选择状态‘, trigger: ‘change‘ }
          ],
          remark: [
            { required: true, message: ‘请填写用户终端号‘, trigger: ‘blur‘ }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {debugger
        let self = this;
        console.dir(self);
        const params = new URLSearchParams();
        let sex1 = ‘‘,isClose1 = ‘‘;
        if(self.ruleForm.sex == ‘男‘){
            sex1 = 0;
        }else{
            sex1 = 1;
        }
        if(self.valid = ‘有效‘){
            isClose1 = ‘1‘;
        }else{
            isClose1 = ‘0‘;
        }
        let psw = Base64.encode(‘123456‘);
        self.dataObj = {
            "userName":self.ruleForm.userName,
            "realName":self.ruleForm.realName,
            "sex":sex1,
            "passWord":psw,
            "mobile":self.ruleForm.mobile,
            "email":self.ruleForm.email,
            "remark":self.ruleForm.remark,
            "isClose":self.ruleForm.isClose
        }

        let data = self.paramSingle(self.dataObj);
        console.log(data);
        params.append(‘param‘,data);
        if(process.env.NODE_ENV === ‘development‘){
                self.url = ‘/s1/copUser/addUser‘;
            };
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios.post(self.url, params).then((res) => {
                if(res.code == ‘0000‘){
                    this.$emit(‘success‘,false);
                    this.$message.success({
                          message: res.msg
                        });
                }else{
                    this.$message.error(res.msg);
                }

                });
            alert(‘submit!‘);
          } else {
            console.log(‘error submit!!‘);
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      vaildInput(elem){
        console.log(this.$refs.value);
      }


    }
  }
</script>


https://blog.csdn.net/sinat_36422236/article/details/79403718

vue—子组件修改父组件的值

原文：https://www.cnblogs.com/ls1519/p/13426000.html