javascript / intermediate
Snippet
Gesteuerte Kind-Komponenten über defineExpose
In Vues <script setup> sind Komponenten standardmäßig 'geschlossen', was bedeutet, dass ihre internen Eigenschaften für Elternkomponenten über Template-Refs nicht zugänglich sind. Das Makro defineExpose ermöglicht es Ihnen, explizit zu wählen, welche internen Methoden oder Zustände öffentlich sein sollen.
snippet.js
javascript
1
2
3
4
5
6
7
8
// Inside Child.vueimport { ref } from 'vue';const internalCount = ref(0);const reset = () => (internalCount.value = 0);defineExpose({reset});
vue
Erklärung
1
const internalCount = ref(0);
Eine private reaktive Variable, die verborgen bleibt, sofern sie nicht explizit freigegeben wird.
2
defineExpose({ ... });
Ein Compiler-Makro, das die öffentliche Schnittstelle der Komponenteninstanz definiert.
3
reset
Die spezifische Funktion, die das Elternteil nun über eine Komponentenreferenz aufrufen kann.