Vue父组件调用子组件方法this.$refs用法(vue父组件调用子组件的方法报错)

Vue父组件调用子组件方法this.$refs用法 1. 介绍this.$refs(ref)的用法ref用在组件可以调用组件的属性方法ref用在标签可以对标签进行操作2.父组件调用子组件的方法2.1.父组件

推荐整理分享Vue父组件调用子组件方法this.$refs用法(vue父组件调用子组件的方法报错)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue父组件调用子组件的值,vue父组件调用子组件的方法报错,vue父组件调用子组件的值,vue父组件调用子组件属性,vue父组件调用子组件的方法并传参,vue父组件调用子组件属性,vue父组件调用子组件的方法并传参,vue父组件调用子组件的方法并传参,内容如对您有帮助，希望把文章链接给更多的朋友！

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

<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.效果

点击弹窗修改框