आप एक कस्टम निर्देश कैसे बनाते हैं?

कस्टम निर्देश आपको निम्न-स्तरीय DOM हेरफेर को एक पुन: प्रयोज्य v-* विशेषता के रूप में encapsulate करने देते हैं। उनका उपयोग करें जब आपको एक तत्व तक सीधी पहुँच की आवश्यकता हो (focus, scroll, तीसरे पक्ष के DOM लाइब्रेरी) — ऐसी चीजें जो घटक/props स्वाभाविक रूप से कवर नहीं करते।

एक स्थानीय निर्देश को परिभाषित करना

<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>