Композиционное API

Element Plus полностью поддерживает Composition API из Vue 3, что позволяет строить компоненты более модульно, управлять состоянием реактивно и улучшать читаемость кода. Основной принцип Composition API — разделение логики по функциям вместо привязки к жизненным циклам и опциям компонента.

Реактивные переменные

Для создания реактивного состояния используются функции ref и reactive из Vue.

ref создаёт реактивную примитивную переменную:

import { ref } from 'vue';

const dialogVisible = ref(false);

reactive создаёт реактивный объект:

import { reactive } from 'vue';

const formState = reactive({
  username: '',
  password: ''
});

Эти переменные можно связывать с компонентами Element Plus через v-model. Например, диалоговое окно ElDialog:

<el-dialog :visible.sync="dialogVisible" title="Пример">
  Содержимое диалога
</el-dialog>
import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    return { dialogVisible };
  }
}

Управление формами

Элементы ElForm, ElFormItem, ElInput и другие удобно использовать с Composition API. Для реактивной формы создаётся объект состояния и объект правил валидации.

import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const formRef = ref(null);

const formData = reactive({
  username: '',
  email: ''
});

const rules = reactive({
  username: [{ required: true, message: 'Введите имя', trigger: 'blur' }],
  email: [{ type: 'email', message: 'Некорректный email', trigger: 'blur' }]
});

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('Форма отправлена');
    } else {
      ElMessage.error('Проверка не пройдена');
    }
  });
};
<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="Имя" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item label="Email" prop="email">
    <el-input v-model="formData.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">Отправить</el-button>
  </el-form-item>
</el-form>

Использование вычисляемых свойств

computed позволяет создавать реактивные вычисления, которые автоматически обновляются при изменении зависимостей.

import { reactive, computed } from 'vue';

const formData = reactive({
  username: '',
  password: ''
});

const isFormValid = computed(() => {
  return formData.username.length > 0 && formData.password.length > 0;
});

Эта переменная удобно применяется для активации или деактивации кнопок:

<el-button :disabled="!isFormValid">Войти</el-button>

Работа с таблицами и списками

Компоненты ElTable, ElTableColumn в комбинации с Composition API позволяют динамически управлять данными и колонками.

import { ref } from 'vue';

const tableData = ref([
  { date: '2026-03-18', name: 'Иван', score: 85 },
  { date: '2026-03-17', name: 'Мария', score: 92 }
]);

const columns = ref([
  { prop: 'date', label: 'Дата' },
  { prop: 'name', label: 'Имя' },
  { prop: 'score', label: 'Оценка' }
]);
<el-table :data="tableData">
  <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label"></el-table-column>
</el-table>

Управление состоянием диалогов и уведомлений

Element Plus предоставляет компоненты ElDialog, ElMessage, ElNotification, которыми можно управлять из Composition API:

import { ref } from 'vue';
import { ElMessage, ElNotification } from 'element-plus';

const dialogVisible = ref(false);

const openDialog = () => {
  dialogVisible.value = true;
};

const notify = () => {
  ElNotification({
    title: 'Уведомление',
    message: 'Операция выполнена успешно',
    type: 'success'
  });
};

const showMessage = () => {
  ElMessage.info('Информационное сообщение');
};

Локальные функции и хуки

Composition API позволяет организовать повторно используемую логику через хуки. Например, можно создать кастомный хук для управления модальными окнами:

import { ref } from 'vue';

export function useDialog() {
  const visible = ref(false);

  const open = () => visible.value = true;
  const close = () => visible.value = false;
  const toggle = () => visible.value = !visible.value;

  return { visible, open, close, toggle };
}

В компоненте это подключается следующим образом:

import { useDialog } from './hooks/useDialog';

export default {
  setup() {
    const { visible, open, close } = useDialog();
    return { visible, open, close };
  }
};
<el-button @click="open">Открыть</el-button>
<el-dialog :visible.sync="visible" title="Диалог">
  Контент
</el-dialog>

Взаимодействие с API компонентов

Element Plus предоставляет программный доступ к методам компонентов через ref. Пример с ElMessageBox:

import { ElMessageBox } from 'element-plus';

const confirmDelete = () => {
  ElMessageBox.confirm('Вы уверены, что хотите удалить?', 'Внимание', {
    confirmButtonText: 'Да',
    cancelButtonText: 'Нет',
    type: 'warning'
  }).then(() => {
    ElMessage.success('Удалено');
  }).catch(() => {
    ElMessage.info('Отмена');
  });
};

Итоговое применение Composition API

Комбинируя реактивные состояния, вычисляемые свойства, локальные функции и программный доступ к компонентам Element Plus, можно строить полностью реактивные и модульные интерфейсы. Это обеспечивает:

  • Лучшую читаемость кода
  • Возможность повторного использования логики через хуки
  • Простую интеграцию с формами, таблицами и уведомлениями
  • Полную совместимость с Vue 3 и современными практиками фронтенд-разработки

Composition API превращает работу с Element Plus из декларативного использования компонентов в управляемую и предсказуемую архитектуру, что особенно важно для крупных проектов.

Оглавление