Платформа EXPAND

Appearance

18. Отправляем сигналы: emits во Vue 3 (эмиты на Vue) ​

Задача-туториал #18: emits. Сигналы компонентов ​

Код с объяснениями, чтобы было проще разобраться ​

Как работают emits: шаг 1 ​

App.vue ​

js
// Компонент App.vue, внешний

// Принимает данные из вложенного (дочернего) компонента, Button

Button.vue ​

js
// Компонент Button.vue, дочерний

// Отправляет данные компоненту внешнему (родителю), App

Пример кода ​

App.vue ​

js
function addToCart(data) {
    console.log('- data from child component -', data);
}

<ButtonEmits @product-selected="addToCart">
  Продукт  🎁
</ButtonEmits>

Button.vue ​

js
// Button.vue

let emit = defineEmits(['product-selected']);

// высылаем сигнал с данными из компонента родителю через JS
emit('product-selected', "123")

// или при клике по кнопке
 <button @click="event => $emit('product-selected', event)" class="btn btn-primary my-3">
 Кнопка
 </button>
  1. Научись издавать и принимать сигналы компонентов так, как показано на видео
  2. Это непростая концепция. Понадобится минимум одно повторение. Это важно для полного овладения данной техникой Vue
  3. Реши задачу #13 из туториалов Vue