elementui refs

在 Element UI 中使用 refs

Element UI 是一个基于 Vue.js 的组件库，refs 是 Vue.js 提供的一种直接访问子组件或 DOM 元素的方式。通过 refs，可以调用子组件的方法或访问其属性。

基本用法

在模板中为组件或元素添加 ref 属性：

<el-button ref="submitButton">提交</el-button>
<el-form ref="formRef"></el-form>

在 Vue 实例中通过 this.$refs 访问：

methods: {
  handleClick() {
    // 访问按钮元素
    console.log(this.$refs.submitButton);
    // 调用表单组件的 validate 方法
    this.$refs.formRef.validate((valid) => {
      if (valid) {
        // 表单验证通过
      }
    });
  }
}

常见场景

表单验证 通过 ref 访问表单组件并调用其方法：

this.$refs.formRef.validate((valid) => {
  if (valid) {
    // 提交表单
  }
});

调用子组件方法 如果子组件暴露了方法，可以通过 refs 调用：

this.$refs.childComponent.someMethod();

访问 DOM 元素 对于普通 HTML 元素，refs 会直接返回 DOM 对象：

this.$refs.myInput.focus();

注意事项

• refs 不是响应式的，避免在模板或计算属性中使用。
• 确保在组件渲染完成后访问 refs，通常在 mounted 钩子或事件处理函数中调用。
• 对于动态生成的组件或元素，可能需要使用 nextTick 确保 refs 可用。

动态 ref

在循环中动态生成 ref 时，可以使用函数或字符串模板：

<div v-for="item in list" :ref="`item-${item.id}`"></div>

通过 this.$refs[item-${id}] 访问。