Задать вопрос
  • Как использовать директивы внутри кастомных директив в nuxt 3?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Встроенного механизма наследования нет. Директивы - это уже продвинутый механизм, подразумевается, что раз уж вы взялись за директивы - вы глубоко понимаете механизмы Vue. Если вам сильно хочется таки использовать чужую директиву внутри своей, надо будет самостоятельно экспериментировать, навскидку вижу два варианта:
    1. "тупой", но точно работающий - пробрасывать все возможные хуки директивы напрямую:
    const myDirective = {
      created(el, binding, vnode, prevVnode) {
         otherDirective?.created(el, binding, vnode, prevVnode);
         ...
      },
      beforeMount(el, binding, vnode, prevVnode) {
         otherDirective?.beforeMount(el, binding, vnode, prevVnode);
         ...
      },
      ....
    }

    2. "умный", но требующий знаний и экспериментов - манипуляции напрямую с vNode.

    Однако, возможно, лучше будет сделать просто-компонент-обёртку, который просто навесит все нужные директивы на обёрнутый компонент, примерно так:
    import { useSlots, withDirectives, resolveDirective } from 'vue'
    
    export default {
      setup() {
        const htmlDirective = {
          mounted(el, html) {
            el.innerHTML = html.value
          }
        }
    
        const colorDirective = {
          mounted(el, color) {
            el.style.color = color.value
          }
        }
        
        // const someDirective = resolveDirective('some-directive');
    
        const slots = useSlots();
    
        return () => withDirectives(slots.default()[0], [
          [htmlDirective, 'some html'],
          [colorDirective, 'red'],
        ])
      }
    }

    <wrapper><some-compnent /></wrapper>
    Ответ написан
    1 комментарий