vue中父组件怎么调用子组件的方法（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.效果

点击弹窗修改框