Wydarzenia komponentu ​

Ta strona zakłada, że przeczytałeś już Podstawy Komponentów. Przeczytaj to najpierw, jeśli dopiero zaczynasz pracę z komponentami.

Emitowanie i nasłuchiwanie wydarzeń ​

Komponent może emitować własne wydarzenia bezpośrednio w wyrażeniach szablonu (np. w obsłudze v-on) używając wbudowanej metody $emit:

<!-- MyComponent -->
<button @click="$emit('someEvent')">Wciśnij mnie</button>

export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

Rodzic może następnie nasłuchiwać jej używając v-on:

<MyComponent @some-event="callback" />

Modyfikator .once jest również wspierany przy nasłuchiwaniu wydarzeń komponentu:

<MyComponent @some-event.once="callback" />

Podobnie jak komponenty i propsy, nazwy wydarzeń zapewniają automatyczną transformację wielkości liter. Zauważ, że wyemitowaliśmy wydarzenie w formacie camelCase, ale możemy go nasłuchiwać używając formatu kebab-case w komponencie rodzica. Tak jak w przypadku formatowania propsów, zalecamy używanie formatu kebab-case dla nasłuchiwania wydarzeń w szablonach.

Argumenty Wydarzenia ​

Czasami przydatne jest emitowanie określonej wartości wraz z wydarzeniem. Na przykład, możemy chcieć, aby komponent <BlogPost> był odpowiedzialny za to, o ile powiększyć tekst. W takich przypadkach możemy przekazać dodatkowe argumenty do $emit, aby dostarczyć tę wartość:

<button @click="$emit('increaseBy', 1)">
  Zwiększ o 1
</button>

Następnie, gdy nasłuchujemy wydarzenia w komponencie rodzica, możemy użyć funkcji strzałkowej w linii jako nasłuchiwacza, co pozwala nam uzyskać dostęp do argumentu wydarzenia:

<MyButton @increase-by="(n) => count += n" />

Lub, jeśli obsługa wydarzenia jest metodą:

<MyButton @increase-by="increaseCount" />

Wtedy wartość zostanie przekazana jako pierwszy parametr tej metody:

methods: {
  increaseCount(n) {
    this.count += n
  }
}

function increaseCount(n) {
  count.value += n
}

Deklarowanie emitowanych zdarzeń ​

Komponent może jawnie zadeklarować zdarzenia, które będzie emitował, używając makra defineEmits()opcji emits:

<script setup>
defineEmits(['inFocus', 'submit'])
</script>

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit']
}

Opcja emits oraz makro defineEmits() obsługują również składnię obiektową. Jeśli używasz TypeScript, możesz określić typy argumentów, co pozwala nam na walidację w czasie wykonywania zawartości emitowanych zdarzeń:

<script setup lang="ts">
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // zwróć `true` lub `false` aby wskazać
    // powodzenie / niepowodzenie walidacji
  }
})
</script>

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

export default {
  emits: {
    submit(payload: { email: string, password: string }) {
      // zwróć `true` lub `false` aby wskazać
      // powodzenie / niepowodzenie walidacji
    }
  }
}

Mimo że jest to opcjonalne, zaleca się zdefiniowanie wszystkich emitowanych zdarzeń w celu lepszego udokumentowania sposobu działania komponentu. Pozwala to również Vue na wykluczenie znanych nasłuchujących z dziedziczonych atrybutów, unikając przypadków brzegowych spowodowanych zdarzeniami DOM ręcznie wywołanymi przez kod zewnętrzny.

Walidacja zdarzeń ​

Podobnie jak w przypadku walidacji właściwości (props), emitowane zdarzenie może być walidowane, jeśli jest zdefiniowane przy użyciu składni obiektowej zamiast składni tablicowej.

Aby dodać walidację, zdarzeniu przypisywana jest funkcja, która otrzymuje argumenty przekazane do wywołania this.$emitemit i zwraca wartość logiczną wskazującą, czy zdarzenie jest prawidłowe, czy nie.

<script setup>
const emit = defineEmits({
  // Brak walidacji
  click: null,

  // Walidacja zdarzenia submit
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Nieprawidłowa zawartość zdarzenia submit!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>

export default {
  emits: {
    // Brak walidacji
    click: null,

    // Walidacja zdarzenia submit
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Nieprawidłowa zawartość zdarzenia submit!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}