कस्टम डायरेक्टिव आपल्याला कमी-स्तरीय DOM हेराफेरी पुनः वापरण्यायोग्य v-* विशेषता म्हणून एनक्याप्सुलेट करू देतात. ज्या वेळी आपल्याला एलिमेंटमध्ये थेट प्रवेश आवश्यक आहे (focus, scroll, तृतीय-पक्ष DOM लायब्ररी) — असा गोष्टी ज्या घटक/प्रॉप्स नैसर्गिकरित्या कव्हर करत नाहीत, तेव्हा त्यांचा वापर करा.
स्थानीय डायरेक्टिव परिभाषित करणे
vue
<script setup>
// a directive is an object of lifecycle hooks; in <script setup>, name it vXxx
const vFocus = {
mounted(el) {
el.focus(); // `el` is the raw DOM element
},
};
</script>
<template>
<input v-focus /> <!-- autofocuses on mount -->
</template>