elementui refs
ElementUI 中使用 refs 的方法
在 ElementUI 中，refs 是 Vue.js 提供的一种访问子组件或 DOM 元素的方式。通过 ref 属性，可以在父组件中直接调用子组件的方法或访问其属性。
基本用法
在模板中为组件或元素添加 ref 属性：
<template>
<el-button ref="submitButton" @click="handleClick">提交</el-button>
</template>在脚本中通过 this.$refs 访问：
export default {
methods: {
handleClick() {
const button = this.$refs.submitButton;
console.log(button); // 输出按钮组件实例
}
}
}访问子组件方法
如果 ref 指向的是一个组件实例，可以直接调用其方法：
<template>
<el-dialog ref="dialog" title="提示">
<span>这是一段内容</span>
</el-dialog>
</template>
<script>
export default {
methods: {
openDialog() {
this.$refs.dialog.open(); // 调用对话框的 open 方法
}
}
}
</script>动态 refs
对于通过 v-for 渲染的列表，ref 会成为一个数组：
<template>
<el-checkbox v-for="item in list" :key="item.id" :label="item.name" ref="checkboxes"></el-checkbox>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' }
]
}
},
mounted() {
console.log(this.$refs.checkboxes); // 输出复选框组件实例数组
}
}
</script>注意事项
$refs只在组件渲染完成后才填充，且不是响应式的。- 避免在模板或计算属性中访问
$refs，因为它可能在初始渲染时不存在。 - 对于表单验证等场景，可以直接调用 ElementUI 组件提供的公开方法：
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过
}
});通过合理使用 refs，可以实现对 ElementUI 组件的精细控制和交互。
