Vue父组件调用子组件方法this.$refs用法

1. 介绍

this.$refs(ref)的用法
ref用在组件可以调用组件的属性方法
ref用在标签可以对标签进行操作

2.父组件调用子组件的方法

2.1.父组件

代码删除了一部分，可能复制会报错

<template>
<div>
  <el-table
    :data="users"
    style="width: 100%">
    <el-table-column label="操作">
      <template slot-scope="users">
        <el-button
          size="mini"
          @click="handleEdit(users.$index, users.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(users.$index, users.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <editUserVue ref="edituser" />//2.引入组件，给组件一个ref的名字方便调用方法
  </div>
</div>
</template>
<script>
import editUserVue from './editUser.vue'//1.引入组件
export default {
  components: {
    editUserVue//1.引入组件
  },
  name: 'Demo',
  data() {
    return {
      users: [{}]
    }
  },
  methods: {
    handleEdit(index, row) {
      this.$refs['edituser'].init(row)//用$refs赋值调用子组件的init方法
    },
    handleDelete(index, row) {
      console.log(index, row)
    }
  }
}
</script>

2.2.子组件

<template>
    <el-dialog :visible.sync="getedituser">
      <el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名字" prop="name">
                <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="user.age"></el-input>
            </el-form-item>
            <el-form-item label="身高" prop="high">
                <el-input v-model.number="user.high"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('user')">提交</el-button>
                <el-button @click="resetForm('user')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
  export default {
    name: 'editUser',
    data() {
      var checkHigh = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('身高不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (10 > value||value > 300) {
              callback(new Error('请输入正确身高'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var checkName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
      var checkAge = (rule, value, callback) => {
        if (!Number.isInteger(value)) {
          callback(new Error('年龄只能为数字!'));
        } else {
          callback();
        }
      };
      return {
        user: {
        },
        rules: {
          name: [
            { validator: checkName, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ],
          high: [
            { validator: checkHigh, trigger: 'blur' }
          ]
        },
        getedituser: true
      };
    },
    methods: {
      submitForm(formName) {
            console.log(this.user)
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$axios({
                    method: 'post',
                    url: '/api/mydemo/edituser',
                    data: this.user,
                    // contentType: 'application/json'
                }).then((res)=>{
                    if(res.status === 200){
                        alert('submit!')
                        this.getedituser = false
                    }else{
                        alert('error!')
                    }
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
          console.log(formName)
            this.$refs[formName].resetFields();
        },
        init(data){//父组件调用的方法
          console.log('来了')
          this.getedituser=true;
          //data是父组件弹窗传递过来的值，我们可以打印看看
          console.log(data)
          this.user = data
        },
    }
  }
</script>

3.效果

点击弹窗修改框