1. 介绍
this.$refs(ref)的用法
ref用在组件可以调用组件的属性方法
ref用在标签可以对标签进行操作
2.父组件调用子组件的方法
2.1.父组件
代码删除了一部分，可能复制会报错文章来源：https://www.toymoban.com/news/detail-467023.html
<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.效果
点击弹窗修改框文章来源地址https://www.toymoban.com/news/detail-467023.html
到了这里，关于Vue父组件调用子组件方法this.$refs用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
