Hauptmenü

Werkzeuge

Kategorien

Archiv

Vue3 Composition API Spickzettel

Erstellt in Javascript am 1. September 2022 vom Daschmi

import { defineEmits, watch, inject, defineProps, computed, ref } from "vue";

Eigene Events mit defineEmits definieren

const emit = defineEmits(['select']);

...

emit('select');

Watcher definieren

watch(var, (newValue) => { .. });

Funktion aus Elternklasse nutzen

const xhr = inject(xhr);

Properties definieren

const props = defineProps(['label', 'invoicein']);

Computed Properties

const var = computed(() => { return ... };

HTML Referenzen nutzen

<script setup>

  let form = ref(null);

</script>

<template>
  <form ref="form">
  ...
</template>

Router mit Properties

#router.js
..
{ path: 'user/:id', component: CustomerUserEdit, props:true }
..

#.vue
const props = defineProps(['id']);

Methoden einer Komponente über ref nach außen verfügbar machen

defineExpose({
  toggleDisplay
});