Ref и доступ к методам компонента

В Element Plus для управления компонентами программно используется система ссылок через ref, предоставляемая Vue 3. С её помощью можно получить доступ к внутренним методам и свойствам компонентов, что особенно важно для сложных интерактивных элементов, таких как таблицы, модальные окна, селекты и уведомления.

Создание и привязка ref

Для начала необходимо создать реактивную ссылку с помощью ref из Vue:

import { ref } from 'vue';

const dialogRef = ref(null);

Эта переменная будет хранить ссылку на компонент Element Plus после рендеринга. Далее её нужно привязать к компоненту через атрибут ref:

<template>
  <el-dialog ref="dialogRef" title="Пример диалога">
    <p>Содержимое окна</p>
  </el-dialog>
  <el-button @click="openDialog">Открыть диалог</el-button>
</template>

<script setup>
import { ref } from 'vue';
import { ElDialog, ElButton } from 'element-plus';

const dialogRef = ref(null);

function openDialog() {
  dialogRef.value.open(); // вызов метода компонента
}
</script>

Ключевые моменты:

  • dialogRef.value содержит экземпляр компонента ElDialog после его монтирования.
  • Методы компонента, такие как open() или close(), доступны напрямую через .value.

Доступ к методам формы

Для компонентов форм, например ElForm, ref используется для валидации и сброса полей:

<template>
  <el-form ref="formRef" :model="formData">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-button @click="submitForm">Отправить</el-button>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

const formRef = ref(null);
const formData = reactive({ name: '' });

function submitForm() {
  formRef.value.validate(valid => {
    if (valid) {
      console.log('Форма валидна', formData);
    } else {
      console.log('Ошибка валидации');
    }
  });
}
</script>

Особенности:

  • validate(callback) проверяет все поля формы и возвращает результат в колбэк.
  • resetFields() сбрасывает значения всех полей формы.

Управление таблицами через ref

ElTable предоставляет множество методов для управления состоянием таблицы: сортировка, фильтрация, выделение строк и прокрутка.

<template>
  <el-table ref="tableRef" :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Имя" />
    <el-table-column prop="age" label="Возраст" />
  </el-table>
  <el-button @click="selectFirstRow">Выбрать первую строку</el-button>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';

const tableRef = ref(null);
const tableData = reactive([
  { name: 'Иван', age: 28 },
  { name: 'Мария', age: 22 },
]);

function selectFirstRow() {
  tableRef.value.setCurrentRow(tableData[0]);
}
</script>

Методы, доступные через ref:

  • clearSelection() — снимает выделение со всех строк.
  • toggleRowSelection(row, selected) — выбирает или снимает выбор конкретной строки.
  • setCurrentRow(row) — выделяет текущую строку.
  • sort(prop, order) — программно сортирует таблицу по колонке.

Использование ref с всплывающими компонентами

Для модальных окон, всплывающих подсказок и сообщений часто используется ref для вызова методов отображения:

<template>
  <el-popover ref="popoverRef" placement="top" width="200">
    <p>Содержимое подсказки</p>
    <template #reference>
      <el-button>Наведи на меня</el-button>
    </template>
  </el-popover>
  <el-button @click="showPopover">Показать подсказку</el-button>
</template>

<script setup>
import { ref } from 'vue';
import { ElPopover, ElButton } from 'element-plus';

const popoverRef = ref(null);

function showPopover() {
  popoverRef.value.doShow();
}
</script>

Методы компонентов всплывающих элементов:

  • doShow() — программно показать поповер.
  • doClose() — закрыть поповер.
  • toggle() — переключает видимость.

Асинхронные компоненты и ref

Для асинхронно загружаемых компонентов важно убедиться, что ref становится доступен только после монтирования:

import { onMounted, ref } from 'vue';

const asyncRef = ref(null);

onMounted(() => {
  asyncRef.value?.someMethod();
});

Использование опциональной цепочки ?. предотвращает ошибки, если компонент ещё не смонтирован.

Особенности работы с ref в Composition API

  • ref всегда хранит объект с ключом .value.
  • Методы компонентов Element Plus доступны через .value после монтирования.
  • Для реактивных данных внутри компонента рекомендуется использовать reactive для сложных объектов, а ref — для примитивов и ссылок на компоненты.

Примеры полезных сочетаний

  1. Диалог с формой:
dialogRef.value.open();
formRef.value.resetFields();
  1. Таблица с фильтрацией:
tableRef.value.clearSelection();
tableRef.value.filter('age', value => value > 25);
  1. Всплывающие уведомления:
popoverRef.value.doShow();

Использование ref в Element Plus обеспечивает прямой программный доступ к методам компонентов, что делает интерфейсы гибкими и управляемыми через код, а не только через шаблон. Это особенно важно для динамических UI, где поведение элементов зависит от логики приложения.

Оглавление