《elementui ref》

解决方案简述

在使用ElementUI时，ref属性是获取组件实例的一个重要手段。通过给组件设置ref，我们可以在父组件中方便地操作子组件，例如获取子组件的数据、调用子组件的方法等。这对于构建复杂交互的页面非常有用。

一、基础用法

来看一个简单的例子。假如有一个输入框组件：
```html

获取输入内容

export default {
methods: {
handleClick() {
// 通过this.$refs获取组件实例
console.log(this.$refs.myInput.inputValue);
}
}
}

``这里给el - input设置了ref = "myInput"，然后在按钮点击事件中通过this.$refs.myInput就可以访问到这个输入框组件实例，进而获取它的inputValue`属性，也就是输入框中的内容。

二、表单验证场景

在表单中，ref也发挥着重要作用。
```html

提交

export default {
data() {
return {
form: {
username: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功');
} else {
console.log('表单验证失败');
return false;
}
});
}
}
}

``当点击提交按钮时，通过this.$refs.form.validate()`来触发表单验证，这是ElementUI表单验证的一种常见方式。

三、动态获取多个同类型组件

如果有多个相同类型的组件，比如多个el - input，可以给它们设置相同的ref（注意：一般不推荐这样做，除非有特殊需求），然后以数组的形式获取。
```html

获取所有输入值

export default {
data() {
return {
inputs: [1, 2, 3] // 假设有三个输入框
};
},
methods: {
getInputsValue() {
// $refs.inputs是一个数组
this.$refs.inputs.forEach(item => {
console.log(item.inputValue);
});
}
}
}

```

以上就是在ElementUI中使用ref的不同思路和场景示例。