ਤੁਸੀਂ ਇੱਕ ਕਸਟਮ ਨਿਰਦੇਸ਼ (directive) ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹੋ?

Question

Accepted Answer

**ਕਸਟਮ ਨਿਰਦੇਸ਼** ਤੁਹਾਨੂੰ **ਘੱਟ-ਸਤਰ DOM ਹਸਤਖੇਪ** ਨੂੰ ਪੁਨਰ-ਵਰਤੋਂ ਯੋਗ `v-*` ਗੁਣ ਵਜੋਂ ਸ਼ਾਮਿਲ ਕਰਨ ਦਿੰਦੇ ਹਨ। ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇੱਕ ਤੱਤ ਤੇ ਸਿੱਧੀ ਪਹੁੰਚ ਦੀ ਲੋੜ ਹੈ (ਫੋਕਸ, ਸਕ੍ਰੋਲ, ਤੀਜੀ-ਪੱਖ DOM ਲਾਈਬ੍ਰੇਰੀਜ) — ਅਜਿਹੀਆਂ ਚੀਜ਼ਾਂ ਜੋ ਕੰਪੋਨੈਂਟ/ਪ੍ਰੋਪਸ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਕਵਰ ਨਹੀਂ ਕਰਦੇ। ## ਸਥਾਨਕ ਨਿਰਦੇਸ਼ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ```vue ``` ਨਾਂ ਦੀ ਰਵਾਇਤ: ਇੱਕ ਵੇਰੀਏਬਲ `vFocus` `v-focus` ਨਿਰਦੇਸ਼ ਬਣ ਜਾਂਦਾ ਹੈ। ## ਨਿਰਦੇਸ਼ ਹੁਕਸ (ਕੰਪੋਨੈਂਟ ਜੀਵਨ ਚੱਕਰ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਿਤ ਕਰਦੇ ਹੋਏ) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## ਬਾਈਂਡਿੰਗ ਮੁੱਲ ਅਤੇ ਯੁਕਤੀ ਦੀ ਵਰਤੋਂ ```vue ``` `binding` ਆਬਜੈਕਟ `value` (ਸਮੀਕਰਨ), `arg` (ਕੋਲਨ ਤੋਂ ਬਾਅਦ), `modifiers` (ਬਿੰਦੂਆਂ ਤੋਂ ਬਾਅਦ), ਅਤੇ `oldValue` ਲੈ ਕੇ ਆਉਂਦਾ ਹੈ। ## ਇੱਕ ਵਿਹਾਰਕ ਉਦਾਹਰਣ: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## ਵੈਸ਼ਵਿਕ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## ਇਹ ਮਾਇਨਾ ਰੱਖਦਾ ਹੈ ਕਸਟਮ ਨਿਰਦੇਸ਼ **ਪੁਨਰ-ਵਰਤੋਂ ਯੋਗ, ਘੱਟ-ਸਤਰ DOM ਵਿਵਹਾਰ** ਲਈ ਸਹੀ ਹਥਿਆਰ ਹਨ — ਸਵੈ-ਫੋਕਸ, ਕਲਿਕ-ਬਾਹਰ, ਆਲਸੀ-ਲੋਡਿੰਗ ਚਿੱਤਰ, ਸੁਝਾਅ, Vue ਤੋਂ ਇਲਾਵਾ DOM ਲਾਈਬ੍ਰੇਰੀਜ ਨੂੰ ਜੋੜਨਾ। ਉਹ ਅਜਿਹੇ ਜ਼ਬਰਦਸਤੀ DOM ਤਰਕ ਨੂੰ ਸ਼ਾਮਿਲ ਅਤੇ ਘੋਸ਼ਿਤ (`v-click-outside`) ਰੱਖਦੇ ਹਨ ਜੀਵਨ ਚੱਕਰ ਹੁਕਸ ਵਿੱਚ ਖਿੰਡੇ ਹੋਏ ਦੀ ਬਜਾਏ। ਹੁਕਸ ਅਤੇ `binding` ਆਬਜੈਕਟ (ਮੁੱਲ/ਯੁਕਤੀ/ਸੰਸ਼ੋਧਕ), ਪਲੱਸ `unmounted` ਵਿੱਚ ਸਫਾਈ ਦਾ ਜ਼ਿਕਰ ਕਰਦਿਆਂ, ਉਹਨਾਂ ਦੀ ਵਿਹਾਰਕ ਵਰਤੋਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ — ਹਾਲਾਂਕਿ ਜ਼ਿਆਦਾਤਰ UI ਤਰਕ ਲਈ, ਕੰਪੋਨੈਂਟ ਅਜੇ ਵੀ ਬਿਹਤਰ ਵਿਕਲਪ ਹਨ।